Includes & Partial Views
Includes & partial views are ways of rendering a markup file within the output of another markup file’s rendered output. There are several reasons for doing this:
- To reuse common markup content across several files – place it in a single file and include it when you need it
- To break up large markup files into smaller components
So what’s the difference between @Include() and @RenderPartial()?
- @Include() is typically used within TemplateTag-based designs and does not offer intellisense
- @RenderPartial() is used within ViewModel-based designs – and enables full intellisense inside the partial view
See examples below.
Include
The Include()-method takes a path as the only parameter:
RAZOR
@Include("Footer.cshtml")
@Include("Includes/Footer.cshtml")
RenderPartial
The @RenderPartial()-method makes it possible to render partial views in a Razor template. It is an alternative to the existing @Include functionality, but is implemented in a way which enables full intellisense inside the partial view.
RAZOR
@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
@Title("Partial view demo")
@Description("Demo of how to render partial views")
<!DOCTYPE html>
<html>
<head>
<title>@Model.Title</title>
</head>
<body>
@* Use current model *@
@RenderPartial("partials/page.cshtml")
@* Use any other model that inherits from ViewModelBase *@
@RenderPartial("partials/page-area.cshtml", this.Model.Area)
@RenderPartial("partials/page-properties.cshtml", this.Model.PropertyItem)
@RenderPartial("partials/page-cart.cshtml", this.Model.Cart)
</body>
</html>
@functions {
/// <summary>
/// Renders a partial view using the current view model
/// </summary>
/// <param name="templatePath">Relative path to a view model template, e.g. "partials/part.cshtml</param>
/// <returns>Output from rendering of the view model template</returns>
string RenderPartial(string templatePath)
{
return RenderPartial(templatePath, this.Model);
}
/// <summary>
/// Renders a partial view using the given view model
/// </summary>
/// <typeparam name="T">The type of viewmodel. The type must inherit from Dynamicweb.Rendering.ViewModelBase</typeparam>
/// <param name="templatePath">Relative path to a view model template, e.g. "partials/part.cshtml</param>
/// <param name="model">Instance of a view model</param>
/// <returns>Output from rendering of the view model template</returns>
string RenderPartial<T>(string templatePath, T model) where T : Dynamicweb.Rendering.ViewModelBase
{
var template = new Dynamicweb.Rendering.Template(templatePath);
template.SetViewModel(model);
return template.Output();
}
}
As of Dynamicweb 9.10, you can also add view parameters:
RAZOR
//In a viewmodel template, call a partial with parameters:
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.ProductCatalog
@using System.Web
@inherits ViewModelTemplate<ProductListViewModel>
@{
var builder = new System.Text.StringBuilder();
builder.Append("String builder from view template<br>");
Dictionary<string, object> parameters = new Dictionary<string, object>();
parameters.Add("testString", "Hello world");
parameters.Add("testInteger", 123);
parameters.Add("testBoolean", false);
parameters.Add("testObject", builder);
}
@RenderPartial("Ecom/ProductCatalog/ProductViewListPartial.cshtml", Model, parameters);
<h1>@Model.PageCount</h1>
//In the partial template (Ecom/ProductCatalog/ProductViewListPartial.cshtml)
@inherits ViewModelTemplate<ProductListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.ProductCatalog
@using System.Web
<h1>From partial</h1>
<p>Page count from partial: @Model.PageCount</p>
<p>testString: @GetViewParameter("testString")</p>
<p>testString: @GetViewParameterString("testString")</p>
<p>testInteger: @GetViewParameter("testInteger")</p>
<p>testInteger: @GetViewParameterInt32("testInteger")</p>
<p>testBoolean: @GetViewParameterBoolean("testBoolean")</p>
@{
var builder = GetViewParameter("testObject") as System.Text.StringBuilder;
builder.Append("Booha from partial");
}
<p>String builder: @builder.ToString()</p>