#3 Razor Components with @Html.Partial and DynamicModel
Reuse Shared Templates
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(...) (or RenderPage in older versions).
Just render the same, external file into here
This uses @Html.Partial to get the file _line.cshtml 3 times.
@Html.Partial("_line.cshtml")
@Html.Partial("_line.cshtml")
@Html.Partial("_line.cshtml")
Passing in values
The next example passes in a word to the sub-template, so that can change what it does based on the variable. The called template will get the parameters on DynamicModel (see code below)
Hello, this is the first line
Second line!
I'm last!
@Html.Partial("_box.cshtml", new { Label = "Hello, this is the first line" })
@Html.Partial("_box.cshtml", new { Label = "Second line!", Color = "red" })
@Html.Partial("_box.cshtml", new { Label = "I'm last!", Color = "blue" })
#3 Razor Components with @Html.Partial and DynamicModel
@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->
Reuse Shared Templates Partial templates... <!-- unimportant stuff, hidden -->
<hr>
<h3>Just render the same, external file into here</h3>
<!-- unimportant stuff, hidden -->
@Html.Partial("_line.cshtml")
@Html.Partial("_line.cshtml")
@Html.Partial("_line.cshtml")
<hr>
<h2>Passing in values</h2>
<!-- unimportant stuff, hidden -->
@Html.Partial("_box.cshtml", new { Label = "Hello, this is the first line" })
@Html.Partial("_box.cshtml", new { Label = "Second line!", Color = "red" })
@Html.Partial("_box.cshtml", new { Label = "I'm last!", Color = "blue" })
<!-- unimportant stuff, hidden -->
@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;">
@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>