What is a partial view and when should I use it?
As developers become familiar with the ASP.NET MVC model, they’ll naturally want to create reusable components filled with content & code. In Web Forms, we could do this by creating a web user control or a web server control, but in MVC, we will use partial views. You’ll notice that conceptually, all of the scenarios below would work for either technology.
- A stock ticker that’s displayed on each page in an application.
- A calendar widget that’s displayed on multiple pages in application.
- A login box.
- A social networking component used on multiple pages, such as a Facebook Like button.
While ASP.NET MVC partial views may behave similarly in theory to web user controls, syntactically and functionally, the two behave differently. Web user controls found in web forms uses ViewState, PostBacks, and Events while MVC partial views do not use any of the preceding techniques for managing state. Just as ASP.NET web user controls do, partial views can tap into the models contained in your application as well as share data between other application components.
Rendering partial views
Partial views in ASP.NET MVC 3 allow the developer to create reusable content with the very precise and clean Razor syntax (or ASPX). The syntax that renders the partial view is implemented as an Html helper. The Html.Partial helper renders the partial view named “_FeaturedProduct” inline. The first argument of all overloaded methods in the call the @Html.Partial expect the view/partial’s file name, without the file extension. Adhering to convention, the @Html.Partial helper assumes the view resides in the ViewsShared folder. Additional overloads in the @Html.Partial method allow you to pass ViewData/ViewBag objects between views/partials (see below under Sharing data…).
The code below demonstrates the call to render the featured product partial view.
<div>
@Html.Partial("_FeaturedProduct")
</div>
Partial views can be rendered inside a Layout Page (or if using MVC 2/3 w/ASPX, the Master Page) as well as regular views.
There are some cases where you might like to step aside and write directly to the HTTP Response stream rather than having a partial view render the results (partials/views use MvcHtmlString/StringWriter). To do so, use the Html.RenderPartial helper.
<div>
@Html.RenderPartial(“_FeaturedProduct”)
</div>
Use Html.RenderPartial for streaming images or other elements that are media-centric or where faster download times are highly important.
Creating a partial view
Both partial views and regular views are .cshtml files, with the difference being the folder where the partial views reside: ViewsShared. Use the Add New View dialog by accessing the context menu from the ViewsShared node in Solution Explorer. The Add New View template dialog offers choices for creating your partial views, including the option for strongly typing views. Don’t forget to check off “Create as a partial view” or you’ll end up with a lot of code to delete.
Once you’ve created the view you can get started customizing it by simply editing the file. There’s no problem in deleting or modifying the view’s code, as there’s no designer tied to it. The code shown below (_FeaturedProduct.cshtml) is the same code the default view template creates, but modified to display the featured product differently:
<style type=“text/css”>
.featuredProduct {border: solid 1px #000}
</style>
<div>
<div>
<h2>
Our Featured product:<br />
@ViewBag.FeaturedProduct.Name
</h2>
</div> <div>
<h3>
Now discounted to $@String.Format(“{0:F}”, ((decimal)ViewBag.FeaturedProduct.Price)-100)
</h3>
</div>
<div>
@Html.ActionLink(“Featured Product Details”, “Details”, new { id = ViewBag.FeaturedProduct.ProductId })
</div>
<div>
<img class=“featuredProduct” src=“@Href(“~/Content/Images”)/@ViewBag.FeaturedProduct.ImageName” alt=“Featured Product”/>
</div>
</div>
As with strongly typed views, strongly typed partial views also support dot notation syntax and access to the model, ViewBag, ViewData and other classes specifically designed for sharing data.
It should be clear when reading through the above code that the syntax of partial view looks the same as a regular view. The important take-away is not about the syntax but how the partial view is used. However, a syntactic benefit to developers is the consistency between both partial and full views, particularly when we need to share data between them.
Sharing Data between views and partial views
It’s a common occurrence to pass data between components of an application, and in this case those components are MVC partials, views & controllers. As previously noted, you should use the ViewBag or ViewData classes to share data across views and controllers. First, a few notes on ViewBag and ViewData:
- ViewData was available in previous versions; ViewBag was released with MVC 3.
- ViewData can contain any type of data in a name-value pair format. I.e., ViewData[“Message”] = “Welcome”;
- ViewBag objects are just wrappers around ViewData objects, and allow developers to code to them using strongly typed syntax.
- ViewBag objects can be extended by simply setting properties in a more fluent syntax. I.e., ViewBag.Customer = new Customer(1,”Smith”);
If code in a controller uses either the ViewBag or ViewData classes, those classes will be available throughout the view’s lifecycle, and that includes its partial views.
The preferable object is the ViewBag. Because of its more fluent and dynamic syntax, there’s more complex objects that can be shared quite easily between components. The sample below demonstrates setting up the ViewBag object in the controller so it will be available to all necessary components:
ProductModel productModel = new ProductModel();
public ActionResult Index()
{
ViewBag.FeaturedProduct = new FeaturedProduct(105, "The Most Awesome Bike Ever!", 1000.00M, "bike4.png");
return View(productModel.Products);
}
The ViewBag is accessed inside the view or partial using the follows syntax:
@ViewBag.FeaturedProduct.Name
Summary
Partial views are a great way to reuse fragments of HTML and Razor syntax together, with the ability to easily share data.
Resources:
Rachel Appel 