Resources
HTML-functions = Code-Snippet with Template Delegates
If you just need a quick simple snippet, Template Delegates are the way to go. They are very limited so only ideal for simple stuff. More complex stuff should use Razor Components with @Html.Partial and DynamicModel.
HTML Func<thing, dynamic> Template Delegate
Template Delegates allow you to use inline HTML in your function.
To make this possible, a bit of magic happens automatically,
so a limitations is that you cannot use named parameters.
You only get one parameter called item.
Basic Example: string generating Html
This example using a string parameter.
This is why the the first parameter in Func<...
is a string.
item is the thing passed into the function.
Output
- this is text, it doesn't have tags
- this string has html tags
- this is just a bold line
Complex Data with Func<dynamic,dynamic> Template Delegate
If you have multiple values, you often want to merge in into one object like this:
Output
- this is text, it doesn't have tags 🌟
- this string has html tags
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
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->
<div @Sys.PageParts.InfoWrapper()>
@Html.Partial("../shared/DefaultInfoSection.cshtml")
<div @Sys.PageParts.InfoIntro()>
<h2>HTML-functions = Code-Snippet with Template Delegates</h2>
<p>If you just need a quick simple snippet, Template Delegates are the way to go.
They are very limited so only ideal for simple stuff. More complex stuff should use
</p>
</div>
</div>
<h2>HTML <code>Func<thing, dynamic></code> Template Delegate</h2>
<p>
Template Delegates allow you to use inline HTML in your function.
To make this possible, a bit of magic happens automatically,
so a limitations is that you cannot use named parameters.
You only get one parameter called <code>item</code>.
</p>
<h3>Basic Example: <code>string</code> generating Html</h3>
<p>
This example using a <code>string</code> parameter.
This is why the the first parameter in <code>Func<...</code>
is a string.
</p>
<div class="alert alert-info">
Note that in the following code <code>item</code> is the thing passed into the function.
</div>
@{
var normalText = "this is text, it doesn't have tags";
var htmlText = "this string <em>has</em> html <strong>tags</strong>";
// Simple Hybrid (Dnn/Oqtane) Template Delegate
Func<string, dynamic> BoldLi = @<li>
<strong>
@Html.Raw(item)
</strong>
</li>;
}
<ul>
@BoldLi(normalText)
@BoldLi(htmlText)
@BoldLi("this is just a bold line")
</ul>
<h3>Complex Data with <code>Func<dynamic,dynamic></code> Template Delegate</h3>
<p>
If you have multiple values, you often want to merge in into one object like this:
</p>
@{
// Simple Hybrid (Dnn/Oqtane) Template Delegate
Func<dynamic, dynamic> FancyLink = @<li>
<strong style="color: @item.Color">
@Html.Raw(item.Label)
@if (item.AddStar) {
<text>🌟</text>
}
</strong>
</li>;
}
<ul>
@FancyLink(new { Label = normalText, Color = "red", AddStar = true })
@FancyLink(new { Label = htmlText, Color = "lime", AddStar = false })
</ul>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })