Chalaki Systems
Training About
« How to program MSAGL (GLEE) to create hierarchical graph layouts
How to Bind a DropDownList with a EditItemTemplate in the GridView »

Fundamentals of ASP.NET MVC 3 Partial Views

By admin | Published: April 2, 2012

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

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

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

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

Create new MVC Partial View Menu in Visual studio

The following dialog box will be displayed:

Create new partial view with a strongly typed model

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.

Sample Partial View in cshtml Razor syntax


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:

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

In the partial view:

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.

 

Categories: ASP.NET, MVC, Views Tags: ASP.NET, MVC3, Partial Views. Bookmark the permalink.
« How to program MSAGL (GLEE) to create hierarchical graph layouts
How to Bind a DropDownList with a EditItemTemplate in the GridView »

One Comment