Skip to main content
Home  › ... Razor

HTML Tutorials

Tutorial Home › Html
Loops
#4 Work with HTML
Using Emojis / Emoticons 👍
Resources

Show a variable

This uses the basic @variableName syntax. This will result in encoding html, so tags in that variable will be shown as html-source.

Initial Code

The following code runs at the beginning and creates some variables/services used in the following samples.

@{
   normalText = "this is text, it doesn't have tags";
   htmlText = "this string <em>has</em> html <strong>tags</strong>";
}

Output

  • this is text, it doesn't have tags
  • this string <em>has</em> html <strong>tags</strong>
<ul>
  <li>@normalText</li>
  <li>@htmlText</li>
</ul>

Encode using @Html.Raw(...)

Output

  • this is text, it doesn't have tags
  • this string has html tags
<ul>
  <li>@Html.Raw(normalText)</li>
  <li>@Html.Raw(htmlText)</li>
</ul>

Add "uncontrolled" html using @:...

Sometimes you need to conditionally add tags, in which case Razor cannot verify that open/close of tags is correct. This would normally throw an error. so you need @:.

Output

This is randomly bold or not, depending on a random event. If it's bold, you'll see a strong tag around it, otherwise not. 
<div>
  @{ var makeBold = new System.Random().NextDouble() > 0.5; }
  @if (makeBold) { 
    @:<strong> 
  }
    This is randomly bold or not, depending on a random event. If it's bold, you'll see a <code>strong</code> tag around it, otherwise not.
  @if (makeBold) { 
    @:</strong>
  }
</div>
Loops
#4 Work with HTML
Using Emojis / Emoticons 👍

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


@{
  var normalText = "this is text, it doesn't have tags";
  var htmlText = "this string <em>has</em> html <strong>tags</strong>";
}


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h3>Show a variable</h3>
  </div>
</div>
<p>This uses the basic <code>@@variableName</code> syntax. This will result in encoding html, so tags in that variable will be shown as html-source.</p>

  @{
     normalText = "this is text, it doesn't have tags";
     htmlText = "this string <em>has</em> html <strong>tags</strong>";
  }


<ul>
  <li>@normalText</li>
  <li>@htmlText</li>
</ul>



Encode using @@Html.Raw(...)

<ul>
  <li>@Html.Raw(normalText)</li>
  <li>@Html.Raw(htmlText)</li>
</ul>



<h2>Add "uncontrolled" html using <code>@@:...</code></h2>
<p>
  Sometimes you need to conditionally add tags, in which case Razor cannot verify that open/close of tags is correct.
  This would normally throw an error. so you need <code>@@:</code>. 
</p>

<div>
  @{ var makeBold = new System.Random().NextDouble() > 0.5; }
  @if (makeBold) { 
    @:<strong> 
  }
    This is randomly bold or not, depending on a random event. If it's bold, you'll see a <code>strong</code> tag around it, otherwise not.
  @if (makeBold) { 
    @:</strong>
  }
</div>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })