Oqtane Tutorials
Oqtane Tutorials

Reuse Templates and Code Tutorials

Tutorial Home › Reuse
Introduction Reuse templates and code
#2 Create functions in your Razor
Template-Delegate Helpers - Razor-Style Functions

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.

Basic Example: function returning random number

Output

  • Random number: 17
  • Random number: 68
@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>

Function with Parameters

This example passes a parameter into the function.

Output

  • iJungleboy is cool 😎
  • Douglas Adams is cool 😎
@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>

Second Example: Multiple parameters

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

Output

  • iJungleboy is <em>ok 😉</em>
  • Douglas Adams is <strong>cool 😎</strong>
  • iJungleboy is ok 😉
  • Douglas Adams is cool 😎
 @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>

Third Example: Returning HTML

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.

Output

  • iJungleboy is ok 😉
  • Douglas Adams is cool 😎
 @functions {
  // Note the return type dynamic and the built-in HTML.Raw
  dynamic 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>

Better ways to Create HTML

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, using:

Introduction Reuse templates and code
#2 Create functions in your Razor
Template-Delegate Helpers - Razor-Style Functions

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>Reuse Code with <code>@@functions { }</code></h2>
    <p>
      Any kind of code to do some work such as figure out a string or calculate something
      should be placed in a <strong>function</strong>. 
      In Razor these are put inside a <em>functions</em> block.
    </p>
  </div>
</div>


<h3>Basic Example: <code>function</code> returning random number</h3>

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



<h3>Function with Parameters</h3>
<p>This example passes a parameter into the function.</p>

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



<h3>Second Example: Multiple parameters</h3>
<p>
  This example using a <code>string</code> and a <code>bool</code> parameter.
</p>
<div class="alert alert-warning">
  Note also that any HTML we return is not handled as expected. 
  So we show an example with/without <code>@@Html.Raw</code>
</div>

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



<h3>Third Example: Returning HTML</h3>
<p>
  This example is similar, but returns a <code>dynamic</code> HTML which is marked to be shown as HTML.
</p>
<div class="alert alert-warning">
  Note this example correctly shows <strong>bold</strong> and <em>emphasis</em>.
</div>

 @functions {
  // Note the return type dynamic and the built-in HTML.Raw
  dynamic 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>



<h2>Better ways to Create HTML</h2>
<p>
  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, using:
</p>
<ul>
  <li>

  </li>
  <li>

  </li>
</ul>

@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })
An error has occurred. This application may no longer respond until reloaded. Reload 🗙