Fundamentals of ASP.NET MVC 3 Partial Views

ASP.NET MVC Partial Views are similar to web user controls available in ASP.NET WebForms. They are reusable components that can be plugged into regular MVC views. A header or footer or a stock ticker is a good example of a partial view as it can be programmed into a Partial view and be used across many regular views. The web user controls are defined in .ascx files where as the partial views of MVC3 can be defined either in .aspx or .cshtml Razor views.

The partial views are similar to regular MVC views in that:

Partial views can be tightly bound to a Model
Partial views can use a Layout
Partial Views can be defined in aspx or Razor
Have access to ViewBag and Model

The partial views are different from web user controls in that

ASP.NET MVC3 partial views behave similarly in theory to web user controls, syntactically and functionally, the two behave differently.
Web user controls use ViewState to preserve state information. Partial Views do not have any such viewstate
Web user controls can PostBack since they are part of a form. Partial views may or may not contain a form.
Events can be handled for the web user controls. MVC partial views do not use any event handling.
Like ASP.NET web user controls, partial views can bind to the models
Like asp.net web user controls, partial views can share data with other components.

How to render a Partial view

Server Side

Using @Html.Partial(“partialviewname”) which returns a string containing the HTML output of the Partial View
Using @{ Html.RenderPartial (“partialviewname”); } which returns a void but sends output HTML of the partial view to the response stream directly

Client Side using AJAX, Javascript or jQuery

Using jQuery

$("#divid").load("/Book/GetPartialView");

1	$("#divid").load("/Book/GetPartialView");

Using document.open(URL) and setting the innerHTML property inside javascript or AJAX

var partialViewHtml = document.open('/Book/GetPartialView');
document.getElementById("divid").innerHTML = partialViewHtml ;

1 2	var partialViewHtml = document.open('/Book/GetPartialView'); document.getElementById("divid").innerHTML = partialViewHtml ;

How to create a partial view?

Partial views, like regular views are defined in .cshtml files.
These files reside in /Views/Shared/ folder as opposed to /Views/Controller folder used by the regular views.

Simply right click on Views/Shared and choose Add/View

The following dialog box will be displayed:

Choose a name, model and select partial View checkbox and hit Add button. The new partial view will be created as a .cshtml file in the /Views/Shared folder. Now we can open this file in the editor and manually change it to suit our business rules.

How to Share Data between views and partial views

We should use the ViewBag object to share data between views and partial views.

In the view:

ViewBag.Summary = "summary";
@Html.Partial ("PartialView", book)

1 2	ViewBag.Summary = "summary"; @Html.Partial ("PartialView", book)

In the partial view:

@Html.DisplayFor(model =&gt; model.Memo)
&lt;br/&gt;Summary: @ViewBag.Summary

1 2	@Html.DisplayFor(model => model.Memo) <br/>Summary: @ViewBag.Summary

Summary

Partial views in MVC can be used to display parts of a web page just like the web user controls in web forms. They can be created and rendered on the server side or on the client side. Partial views can be assigned with a model and you can also pass data into the partial views by using the global ViewBag object.

Also read Part 2 of this post How to create a sample MVC application to render a Partial view on client side and server side.