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
Function with Parameters
This example passes a parameter into the function.
Output
- iJungleboy is cool 😎
- Douglas Adams is cool 😎
Second Example: Multiple parameters
This example using a string
and a bool
parameter.
@Html.Raw
Output
- iJungleboy is <em>ok 😉</em>
- Douglas Adams is <strong>cool 😎</strong>
- iJungleboy is ok 😉
- Douglas Adams is cool 😎
Third Example: Returning HTML
This example is similar, but returns a dynamic
HTML which is marked to be shown as HTML.
Output
- iJungleboy is ok 😉
- Douglas Adams is cool 😎
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:
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 })