App


Reuse Templates and Code Tutorials

Tutorial HomeReuse
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Selected: Dynamic (Razor14 or below)

Reuse Shared Templates with Html.Partial and MyModel

Partial templates are cshtml files which you can use multiple times. Typically they will contain something which you need in many places, like a menu or a data-visualizer which gets data as a parameter, and then creates a different table each time. Here's how to use it with Html.Partial(...).

Passing Parameters/Values

If you pass values to the Razor Control on older Base classes such as Razor14, the parameters arrive on the DynamicModel object.

On the new typed base class RazorTyped it will be in the MyModel object (see examples below)

This uses @Html.Partial to get the file line.cshtml 3 times.

⬇️ Result | Source ➡️




@inherits Custom.Hybrid.RazorTyped

@Html.Partial("line.cshtml")
@Html.Partial("line.cshtml")
@Html.Partial("line.cshtml")

Source Code of line.cshtml

@inherits Custom.Hybrid.Razor14
<hr style="height: 10px; border: 1; box-shadow: inset 0 9px 9px -3px rgba(11, 99, 184, 0.8); border-radius: 5px;">

The next example passes in a word to the sub-template, so that can change what it does based on the variable.

For the Razor14 we will use the parameters on DynamicModel (see code below)

The same Example for RazorPro (new v16). The called template will get the parameters on MyModel (see code below)

⬇️ Result | Source ➡️

Hello, this is the first line
Second line!
I'm last!
@inherits Custom.Hybrid.Razor14

@Html.Partial("Box Dynamic.cshtml", new { Label = "Hello, this is the first line" })
@Html.Partial("Box Dynamic.cshtml", new { Label = "Second line!", Color = "red" })
@Html.Partial("Box Dynamic.cshtml", new { Label = "I'm last!", Color = "blue" })

Source Code of Box Dynamic.cshtml

@inherits Custom.Hybrid.Razor14
@{
  // pick up parameters which were passed in
  var label = DynamicModel.Label;
  var color = DynamicModel.Color as string ?? "black"; // default to "black" if not provided
}
<div style="border: solid 2px @color">
  @label
</div>