Skip to main content
Home  › ... Razor

Reuse Templates and Code Tutorials

Tutorial HomeReuse

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.

Output




@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;">

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)

Output

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" })

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

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
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->



<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h2>Reuse Shared Templates</h2>
    <p>
      Partial templates are <code>cshtml</code> 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 <code>Html.Partial(...)</code> (or <code>RenderPage</code> in older versions). 
    </p>
  </div>
</div>


<h3>Just render the same, external file into here</h3>
<p>This uses <code>@@Html.Partial</code> to get the file <code>line.cshtml</code> 3 times.</p>

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



<h3>Passing in values</h3>
<p>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 <code>DynamicModel</code> (see code below)</p>

  @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" })



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })