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


Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

7 Responses to "Partial Views in ASP.NET MVC 3"
  1. Anonymous said...
    December 6, 2012 at 6:20 AM

    This not even works...

  2. Anonymous said...
    January 3, 2013 at 9:50 AM

    how does

  3. Anonymous said...
    January 6, 2013 at 9:44 AM

    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!

  4. Anonymous said...
    January 12, 2013 at 6:26 AM

    Works great, thanks

  5. jasie said...
    March 15, 2013 at 6:43 AM

    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

  6. RAM said...
    September 13, 2013 at 12:20 AM

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

  7. Jason Robertson said...
    March 19, 2014 at 3:45 AM

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

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions