Umbraco Partial Views with Razor

Partial Views encapsulate a piece of your view for reuse throughout your site. Using them can remove cumbersome logic from your primary templates while keeping your code DRY. Let’s start with a basic use case for partial views: getting the most recent children of a node.

Right-click the Partials folder in Visual Studio (you may need to show all files and add this folder to your project) and add a new Razor view page named BlogLatestUpdates.cshtml. On this page I’ll inherit from UmbracoTemplatePage and proceed to select the five most recent children, displaying them in a group of div’s. I use a variation of this partial to render the “Latest updates” section next to my posts.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
/_ Select the nodes _/
var nodes = CurrentPage.Children.Where("Visible")
.OrderBy("Id desc")
.Take(5);
}

<section class="latest-updates">
 <div class="heading-panel">
 <h4>Latest updates &raquo;</h4>
 </div>
 @foreach (var item in nodes)
 {
 <div class="article-panel">
 <a href="@item.Url">
 <h5>@item.Headline</h5>
 </a>
 </div>
 }
</section>

Now on your main template, reference the Partial View with the code below.

@Html.CachedPartial("BlogLatestUpdates", Model.Content, 86400000)

This helper references the Partial View I created, passes the IPublishedContent from the main template, and caches the response for one day. Note that this response will be cached across all pages. There are optional parameters you can supply for caching by page or by member.

Now suppose I want to create a Partial View and pass it specific data. In this case, I suggest adding a folder named ViewModels to your project and add a class to represent the data structure being passed. In this example, I’ll create a class named BlogItemTeaserViewModel to represent a blog post I want to render a sample of. The class looks like the following:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ProjectName.ViewModels
{
public class BlogItemTeaserViewModel
{
public string Headline { get; set; }
public DateTime PublishDateTime { get; set; }
public HtmlString ArticleCopy { get; set; }
public string URL { get; set; }
}
}

Now I’ll add a Partial View as I did in the first example, however, instead of referencing the UmbracoTemplatePage, I will reference the view model I just defined.

@model ProjectName.ViewModels.BlogItemTeaserViewModel

<article>
 <div class="row">
 <div class="large-8 large-centered columns">
 <section class="text-center">
 <a href="@Model.URL">
 <h2>
 @Model.Headline
 </h2>
 </a>
 <span>
 @{
 @Model.PublishDateTime.ToString("MMMM dd, yyyy")
 }
 </span>
 </section>
 <div>
 @RazorHelpers.Truncate(Model.ArticleCopy.ToString(), 200, true, false)
 <a href="@Model.URL">Read more &nbsp;&#8594;</a>
 </div>
 </div>
 </div>
</article>
<hr />

On my main template, I’ll render the Partial View with the following code, this time not caching the output. Each of the properties I assign to my view model object are defined on the document type of the node I’m passing it.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
/_ Select the nodes _/
var nodes = CurrentPage.Children
.Where("Visible")
.OrderBy("CreateDate desc")

<div class="row">
 <div class="large-12 columns">
 <section class="page-container">
 @foreach (var item in nodes.Skip((page - 1) * pageSize).Take(pageSize))
 {
 @Html.Partial("BlogItemTeaser", new BlogCMS.Models.BlogItemTeaserViewModel
 {
 Headline = item.GetPropertyValue("Headline"),
 PublishDateTime = item.GetPropertyValue("PublishDateTime"),
 ArticleCopy = item.GetPropertyValue("ArticleCopy"),
 URL = item.Url
 })
 }
 </section>
 </div>
</div>

I hope this tutorial helps you reuse more of your front-end markup and logic. Please leave a comment if you find that something is unclear.

Umbraco Razor ASP Dot Net MVC