Skip to main content

HTML Tutorials

Tutorial Home › Html

Show the variables as is

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>

Encode using @Html.Raw(...) or @:...
  • this is text, it doesn't have tags
  • this string has html tags
By the way: if you're only working on newer DNNs like 9.x, you can also use @:... as a shorter version of Html.Raw

Reusing a Snippet using @helper

Razor Helpers are like functions, which you can call again and again to produce html. What makes them special is that you can write html into the function, just like normal razor code.

  • this is text, it doesn't have tags
  • this string has html tags
  • this is just a bold line

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. 

<!-- 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 the variables as is This uses the... <!-- unimportant stuff, hidden -->
<ul>
  <li>@normalText</li>
  <li>@htmlText</li>
</ul>

Encode using @@Html.Raw(...) or @@:...
<ul>
  <li>@Html.Raw(normalText)</li>
  <li>@Html.Raw(htmlText)</li>
</ul>

<em>By the way: if you're only working on newer DNNs like 9.x, you can also use <code>@@:...</code> as a shorter version of Html.Raw</em>

Reusing a Snippet using @@helper Razor... <!-- unimportant stuff, hidden -->
<ul>
  @BoldLi(normalText)
  @BoldLi(htmlText)
  @BoldLi("this is just a bold line")
</ul>

@helper BoldLi(string label) {
  <li>
    <strong>
      @Html.Raw(label)
    </strong>
  </li>
}

<!-- unimportant stuff, hidden -->