Oqtane Tutorials
Oqtane Tutorials

Reuse Templates and Code Tutorials

Tutorial Home › Reuse
Code - Function and Similar Helpers
#3 Reuse Shared Templates with Html.Partial and MyModel
Use Shared C# Code
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Strong-Typed (2sxc 17.06+) Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)
Resources

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

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

Source Code of Box Typed.cshtml

@inherits Custom.Hybrid.RazorTyped
@{
  // pick up parameters which were passed in
  var label = MyModel.String("Label");
  var color = MyModel.String("Color", fallback: "black"); // default to "black" if not provided
}
<div style="border: solid 2px @color">
  @label
</div>

 

Code - Function and Similar Helpers
#3 Reuse Shared Templates with Html.Partial and MyModel
Use Shared C# Code