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