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.
Selected: Strong-Typed (2sxc 17.06+) Switch to 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.Strong.cshtml", new { Label = "Hello, this is the first line" })
@Html.Partial("Box.Strong.cshtml", new { Label = "Second line!", Color = "red" })
@Html.Partial("Box.Strong.cshtml", new { Label = "I'm last!", Color = "blue" })

Source Code of Box.Strong.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>

⬇️ Result | Source ➡️

Hello, this is the first line
Second line!
I'm last! 
@inherits Custom.Hybrid.RazorTyped
@using AppCode.Razor

@* In this example the Razor expects a string-only parameter *@
@Html.Partial("Box-Model-Title.cshtml", "Hello, this is the first line")

@* In this example the Razor expects a tuple with 2 strings *@
@Html.Partial("Box-Model-Title-Color.cshtml", ("Second line!", "red"))

@* This example uses a strictly typed model AppCode.Razor.TutTitleColorModel *@
@Html.Partial("Box-Model-TutTitleColor.cshtml", new TutTitleColorModel {
  Title = "I'm last!",
  Color = "blue"
})

Source Code of Box-Model-Title.cshtml

@inherits Custom.Hybrid.RazorTyped<string>
@{
  // pick up parameters which were passed in
  var label = Model; // Model, not MyModel, is a string, because of RazorTyped<string>
}
<div style="border: solid 2px black">
  @label
</div>

Source Code of Box-Model-Title-Color.cshtml

@inherits Custom.Hybrid.RazorTyped<(string, string)>
@{
  // pick up parameters which were passed in
  var label = Model.Item1; // Model.Item1 is a string, tuple part 1
  var color = Model.Item2 ?? "black"; // Model.Item2 is a string, tuple part 2
}
<div style="border: solid 2px @color">
  @label
</div>

Source Code of Box-Model-TutTitleColor.cshtml

@inherits Custom.Hybrid.RazorTyped<AppCode.Razor.TutTitleColorModel>
@using AppCode.Razor
@{
  // pick up parameters which were passed in
  // The Model is of type AppCode.Razor.TutTitleColorModel
  var label = Model.Title;
  var color = Model.Color ?? "black";
}
<div style="border: solid 2px @color">
  @label
</div>

Source Code of TutTitleColorModel.cs

namespace AppCode.Razor
{
  /// <summary>
  /// Custom Model to provide a title and color as a typed model for a tutorial
  /// </summary>
  public class TutTitleColorModel
  {
    public string Title { get; set; }
    public string Color { get; set; }
  }
}

 

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