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
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:
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.
One Comment