Reuse Templates and Code Tutorials

Tutorial Home › Reuse

Razor Components with @Html.Partial and DynamicModel

#5 Reuse Razor Helpers (mini-templates) with CreateInstance

Reuse a function library CreateInstance

Resources

Reuse Shared Razor Helpers

There are multiple ways to create shared Razor helpers:

public functions returning html
⭐ this is recommended in v12 and above as it works in Dnn ✅ and Oqtane ✅
the @helper command
👍 this is simpler, but only works in Dnn ✅ but not in Oqtane ⛔

Razor helpers are functions that put HTML into the page. You can create them using either
@functions { dynamic helpername() { ... } }
or
@helper helpername() { ... }

You can also share them by placing them into a separate file (just remember to mark them public). This lets you put a bunch of tiny helpers into a helpers-library and use them from elsewhere. To achieve this, we use CreateInstance to get an object with these methods, and then use it.

Using Shared Helpers

The example takes a cshtml file using CreateInstance(...)and uses it as a central helpers library. The helper PreviewWithLightbox will generate a thumbnail, include Fancybox3 (only the first time) and ensure you can click it for a full image.

Output

@{
  var lightbox = CreateInstance("../shared/Fancybox.cs");
}
@lightbox.PreviewWithLightbox(@App.Path + "/app-icon.png")
&nbsp;
@lightbox.PreviewWithLightbox(@App.Path + "/reuse/demo.png", 200, 100)

Source Code of ../shared/fancybox.csusing ToSic.Razor.Blade;
public class Fancybox: Custom.Hybrid.Code14
{
  // Create an image which opens a larger version in a lightbox
  public IHtmlTag PreviewWithLightbox(string url, int width = 100, int height = 100, string classes = "", string label = null, bool figure = true)
  {
    // Make sure the fancybox is added to the page, but only once
    Kit.Page.Activate("fancybox4"); 

    var linkTag = Tag.A().Attr("data-fancybox='gallery'").Href(url).Class(classes).Attr("data-caption", label).Wrap(
        Tag.Img().Src(Link.Image(url, width: width, height: height))
      );
    return figure ? Tag.Figure(linkTag) as IHtmlTag : linkTag;
  }
}

Razor Components with @Html.Partial and DynamicModel

#5 Reuse Razor Helpers (mini-templates) with CreateInstance

Reuse a function library CreateInstance

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

@* 2dg: neue info section part *@
<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h2>Reuse Shared Razor Helpers</h2>
    <p>
      There are multiple ways to create shared Razor helpers:
    </p>
    <ul>
      <li>
        public functions returning html <br>
        ⭐ this is recommended in v12 and above as it works in Dnn ✅ and Oqtane ✅
      </li>
      <li>
        the <code>@@helper</code> command <br>
        👍 this is simpler, but only works in Dnn ✅ but not in Oqtane ⛔
      </li>
    </ul>
    <p>
      Razor helpers are functions that put HTML into the page. You can create them using either <br>
      <code>@@functions { dynamic helpername() { ... } }</code> <br>
      or <br>
      <code>@@helper helpername() { ... } </code>
    </p>
    <p>
      You can also share them by placing them into a separate file (just remember to mark them <code>public</code>). This lets you put a bunch of tiny helpers into a helpers-library and use them from elsewhere. To achieve this, we use <code>CreateInstance</code> to get an object with these methods, and then use it. 
    </p>
  </div>
</div>
@* 2dg: neue info section part *@

<h2>Using Shared Helpers</h2>
<p>The example takes a cshtml file using <code>CreateInstance(...)</code>and uses it as a central helpers library. The helper <code>PreviewWithLightbox</code> will generate a thumbnail, include Fancybox3 (only the first time) and ensure you can click it for a full image. </p>

  @{
    var lightbox = CreateInstance("../shared/Fancybox.cs");
  }
  @lightbox.PreviewWithLightbox(@App.Path + "/app-icon.png")
  &nbsp;
  @lightbox.PreviewWithLightbox(@App.Path + "/reuse/demo.png", 200, 100)



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })