Partial Views in ASP.NET MVC 3

Tweet

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

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.

Return Partial Views from Action method

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

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’);

Tweet

About The Author

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.