Partial Views in ASP.NET MVC 3

A Partial View is a reusable fragment of content and code that can be embedded in another view and improves the usability of a site, while reducing duplicate code.

Note: A Partial View in ASP.NET MVC is similar to a user control in ASP.NET Web Forms and is rendered using the ViewUserControl class, which derives from the ASP.NET UserControl
class. If you are using the Razor view engine, the partial view is a .cshtml template and for the ASPX view engine, an .ascx template.

A simple use of a partial view can be an online e-commerce site where a view can contain various sections like - items in the shopping cart, suggested items, wish list, items others brought etc. To reduce the complexity of such views, you can put each section into a separate partial view and then use all these partial views into a single view. Another simple use of the partial views is to use it to display social bookmarking icons across multiple pages. Partial Views are also used in many AJAX scenarios.

Difference between View and Partial view

A View when rendered produces a full HTML document, whereas a partial view when rendered produces a fragment of HTML. A partial view does not specify the layout.

Creating a Partial View

In order to create a partial view, right click the /Views/Shared folder > Add > View. Type a View Name, type or choose a class from the Model class and check the Create as a partial view option, as shown below

aspnet-mvc-partial-view

Click Add and a partial view file at Views/Shared/RegistrationSummary.cshtml gets created.

Note: It’s not mandatory to create a partial view in the Shared folder, but looking at it’s usage of reusability, the Shared folder is a good place to store it.

Inserting Partial Views

Partial Views can be inserted by calling the Partial or RenderPartial helper method. The difference between the two is that the Partial helper renders a partial view into a string whereas RenderPartial method writes directly to the response stream instead of returning a string.

mvc-render-partial
Return Partial Views from Action method

Here’s how to use a partial view to return from an action method

image

You can also use jQuery to make an AJAX request and load a Partial View into a View. Suppose there’s a paragraph element called ‘para’

$(‘#para’).load(‘/account/registrationsummary’);





About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

7 comments:

Anonymous said...

This not even works...

Anonymous said...

how does

Anonymous said...

Great. Got this to work with @Html.Partial("PartialViewName"). I initially overlooked your note on creating the Action method but it worked once I added that. Thanks for a nice and simple post that works!

Anonymous said...

Works great, thanks

jasie said...

i tried this,but when i press again the button to call this load,the call doesn't reach the server.like if it still uses the cache.can i use load each time,to load from the server ?because i load a partial view with a model that is changing,so when i press again edit button,and call the load,it should load the view with the new data.
thanks

Anonymous said...

$(‘#para’).load(‘/account/registrationsummary’);
using this how to pass a parameter to the method 'Registrationsummary'

Jason Robertson said...

To pass something to the registrationsummary method you can add another / 'account/registrationsummary/1'