App

Reuse Templates and Code Tutorials

Tutorial Home › Reuse
Reuse Code and Razor Templates
#2 Code - Function and Similar Helpers
Reuse Shared Templates with Html.Partial and MyModel

Code - Function and Similar Helpers

Resources

Reuse Code with @functions { }

Any kind of code to do some work such as figure out a string or calculate something should be placed in a function. In Razor these are put inside a functions block.

⬇️ Result | Source ➡️

  • Random number: 77
  • Random number: 40
@inherits Custom.Hybrid.RazorTyped

@functions {
  // Variable keeping the random number generator
  private Random generator = new Random(DateTime.Now.Second);

  // Get random number between 0 and 100
  public int Random100() {
    return generator.Next(0, 100);
  }
}
<ul>
  <li>Random number: @Random100()</li>
  <li>Random number: @Random100()</li>
</ul>

This example passes a parameter into the function.

⬇️ Result | Source ➡️

  • iJungleboy is cool 😎
  • Douglas Adams is cool 😎
@inherits Custom.Hybrid.RazorTyped

@functions {
  // Simple string to string delegate
  string MakeIsCool(string name) {
    return name + " is cool 😎";
  }
}
<ul>
  <li>@MakeIsCool("iJungleboy")</li>
  <li>@MakeIsCool("Douglas Adams")</li>
</ul>

This example using a string and a bool parameter.

Note also that any HTML we return is not handled as expected. So we show an example with/without @Html.Raw

⬇️ Result | Source ➡️

  • iJungleboy is <em>ok 😉</em>
  • Douglas Adams is <strong>cool 😎</strong>
  • iJungleboy is ok 😉
  • Douglas Adams is cool 😎
@inherits Custom.Hybrid.RazorTyped

@functions {
  string MaybeCool(string name, bool isCool) {
    return isCool ? name + " is <strong>cool 😎</strong>" : name + " is <em>ok 😉</em>";
  }
}
<ul>
  <li>@MaybeCool("iJungleboy", false)</li>
  <li>@MaybeCool("Douglas Adams", true)</li>
  <li>@Html.Raw(MaybeCool("iJungleboy", false))</li>
  <li>@Html.Raw(MaybeCool("Douglas Adams", true))</li>
</ul>

This example is similar, but returns a dynamic HTML which is marked to be shown as HTML.

Note this example correctly shows bold and emphasis.

⬇️ Result | Source ➡️

  • iJungleboy is ok 😉
  • Douglas Adams is cool 😎
@inherits Custom.Hybrid.RazorTyped

@functions {
  // Note the return type object and the built-in HTML.Raw
  object MaybeCoolHtml(string name, bool isCool) {
    return Html.Raw(isCool ? name + " is <strong>cool 😎</strong>" : name + " is <em>ok 😉</em>");
  }
}
<ul>
  <li>@MaybeCoolHtml("iJungleboy", false)</li>
  <li>@MaybeCoolHtml("Douglas Adams", true)</li>
</ul>

The above examples show how you can get things done, but of course writing HTML directly into a string doesn't look ideal. We can do better, check the Other-Tutorials Tab

  1. Code - Function and Similar Helpers

    Normal C# functions are the basic block for reusing code. 

  2. RazorBlade Basic Html5 Tag API Introduction v3.0

    The basics of creating html directly from code

Requirements
Related

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. 

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.

⬇️ Result | Source ➡️

  • this is text, it doesn't have tags
  • this string has html tags
  • this is just a bold line 
@inherits Custom.Hybrid.RazorTyped

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

 If you have multiple values, you often want to merge in into one object like this:

⬇️ Result | Source ➡️

  • this is text, it doesn't have tags 🌟
  • this string has html tags 
@inherits Custom.Hybrid.RazorTyped

@{

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

 

 

Reuse Code and Razor Templates
#2 Code - Function and Similar Helpers
Reuse Shared Templates with Html.Partial and MyModel