Reuse Templates and Code Tutorials

Razor Components with @Html.Partial and DynamicModel

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

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.

Resources

Functions

Helpers

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.

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

  

Razor Components with @Html.Partial and DynamicModel

#4 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
<!-- unimportant stuff, hidden -->

Reuse Shared Razor Helpers There are... <!-- unimportant stuff, hidden -->

<hr>
<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>
</trim>

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



<!-- unimportant stuff, hidden -->

Source Code of fancybox.cs

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

    return Tag.Figure(
      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))
      )
    );
  }
}