Please enable Javascript to correctly display the contents on Dot Net Tricks!

Partial View in Asp.net MVC3 Razor

Posted By : Shailendra Chauhan, 16 Sep 2012
Updated On : 11 Jun 2014
Total Views : 149,199   
Support : MVC4 & MVC3
 

A partial view is like as user control in Asp.Net Web forms that is used for code re-usability. Partial views helps us to reduce code duplication. Hence partial views are reusable views like as Header and Footer views.

We can use partial view to display blog comments, product category, social bookmarks buttons, a dynamic ticker, calendar etc. For understanding the different rendering ways of partial view refer the article RenderPartial vs RenderAction vs Partial vs Action in MVC Razor

Creating A Partial View

A partial view has same file extension(.cshtml) as regular view. To create a partial view do right click on shared folder (\Views\Shared) in solution explorer and click on "Add New View" option and then give the name for partial view and also checked the Create a partial view option as shown in fig.

Note

  1. It is best practice to create partial view in the shared folder and partial view name is preceded by "_", but it is not mandatory. The "_" before view name specify that it is a reusable component i.e. partial view.

Rendering Partial View

A partial view is rendered by using the ViewUserControl class that is inherited/derived from the ASP.NET UserControl class. The Partial, RenderPartial, RenderAction helper methods are used to render partial view in mvc3 razor.

 <div> @Html.Partial("_Comments") </div> 
<div> @{Html.RenderPartial("_Comments");} </div> 

The main difference between above two methods is that the Partial helper method renders a partial view into a string while RenderPartial method writes directly into the response stream instead of returning a string.

 <div> @{Html.RenderAction("_Category","Home");} </div> 

Note

  1. Partial or RenderPartial methods are used when a model for the page is already populated with all the information. For example in a blog to show an article comment we would like to use Partial or RenderPartial methods since an article information are already populated in the model.

  2. RenderAction method is used when some information is need to show on multiple pages. Hence partial view should have its own model. For example to category list of articles on each and every page we would like to use RenderAction method since the list of category is populated by different model.

Render Partial View Using jQuery

Sometimes we need to load a partial view with in a popup on run time like as login box, then we can use jQuery to make an AJAX request and render a Partial View into the popup. In order to load a partial view with in a div we need to do like as:

 <script type="text/jscript"> 
$('#divpopup').load('/shared/_ProductCategory’); 
</script> 
Summary

I hope you will enjoy this tips and tricks while programming with Asp.Net MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

 
Recommended for you
 
About the Author
Shailendra Chauhan

Shailendra Chauhan is an Entrepreneur, Author, Architect, and Corporate Trainer. He has rewarded as Microsoft MVP for his exceptional contributions in Microsoft Visual Studio and Development Technologies.

With more than 7 years in hand experience Shailendra Chauhan is a polymath in the domains of Microsoft .NET technologies and an array of other technologies including JavaScript, AngularJS, Node.js, Ionic and NoSQL Databases to name but a few.

He is the author of some of most popular e-books which encompass technical Interview on Node.js Interview Questions and Answers , ASP.NET MVC Interview Questions and Answers , AngularJS Interview Questions and Answers and LINQ Interview Questions and Answers. Furthermore he is a technical reviewer for book on ASP.NET MVC 4 Mobile App Development. Know more...
 
Free Interview Books
 
10 SEP
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN 05:00 PM-06:30 PM IST

More Details
7 SEP
ASP.NET MVC with AngularJS Development (online)

Weekdays (Mon-Fri) 07:30 AM-09:00 AM IST

More Details
3 SEP
ASP.NET MVC with AngularJS Development (online)

Weekend (Sat, Sun) 03:00 PM-05:00 PM IST

More Details
29 AUG
NodeJS Development (online)

MON-FRI     06:00 AM-07:30 AM IST

27 AUG
PPC Marketing (offline)

Sat, Sun     03:00 PM-05:00 PM IST

20 AUG
NodeJS Development (offline)

Sat, Sun     11:00 AM-12:30 PM IST

16 AUG
NodeJS Development (online)

Mon-Fri     09:00 PM-10:30 PM IST

12 AUG
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     09:30 PM-11:00 PM IST

1 AUG
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     07:30 AM-09:00 AM IST

24 JUL
AngularJS Development (offline)

Sat,Sun     08:00 AM-09:30 AM

24 JUL
ASP.NET MVC with AngularJS Development (offline)

Sat, Sun     09:30 AM-11:00 AM

14 JUL
PPC Marketing (offline)

Sat, Sun     12:00 AM-02:00 PM IST

11 MAY
.NET Development (offline)

Mon-Fri     9:00 AM-11:00 AM IST

BROWSE BY CATEGORY
 
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 
+