Skip to main content
Home  › ... Razor

Reuse Templates and Code Tutorials

Tutorial Home › Reuse
Create functions in your Razor
#3 Template-Delegate Helpers - Razor-Style Functions
Razor Components with @Html.Partial and DynamicModel
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.

Note that in the following code 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 
@{
  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>

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 
@{
  // 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>
Create functions in your Razor
#3 Template-Delegate Helpers - Razor-Style Functions
Razor Components with @Html.Partial and DynamicModel

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&lt;thing, dynamic&gt;</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&lt;...</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&lt;dynamic,dynamic&gt;</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 })