HTML Tutorials

Tutorial Home

Loops

#4 Work with HTML

Using Emojis / Emoticons 👍

Show a variable

Resources

C# Html.Raw

Razor intro

Razor Syntax

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

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(...)`

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 @:.

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>";
}
Show a variable @Html.Partial("../shared... <!-- unimportant stuff, hidden -->


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



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

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



<hr>
<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>



<!-- unimportant stuff, hidden -->