Part 52 Partial views in mvc


Link for code samples used in the demo

Link for csharp,,, dotnet basics, mvc and sql server video tutorial playlists

In this video we will discuss partial views in mvc.

If you are an webforms developer, then you will realize that partial views in mvc are similar to user controls in webforms.

Partial views are used to encapsulate re-usable view logic and are a great means to simplify the complexity of views. These partial views can then be used on multiple views, where we need similar view logic.

If you are using web forms view engine, then the partial views have the extension of .ascx. If the view engine is razor and programming language is c#, then partial views have the extension of .cshtml. On the other hand if the programming language is visual basic, then the extension is .vbhtml.

Let us understand partial views with an example. We want to display, employee photo and his details.

Index Action() method in HomeController retrurns the list of employees.
public ActionResult Index()
SampleDBContext db = new SampleDBContext();
return View(db.Employees.ToList());

Index.cshtml is available on my blog at the following link. This view is a bit messy and complex to understand.

To simplify this view, let’s encapsulate the HTML and code that produces the employee table in a partial view.

Right click on the “Shared” folder and add a view. Set
View name = _Employee
View engine = Razor
Create a strongly typed view = Checked
Model class = Employee (MVCDemo.Models)
Scaffold template = Empty
Create as a partial view = Checked

This should add “_Employee.cshtml” partial view to the “Shared” folder.

Please note that, partial views can be added to “Shared” folder or to a specific views folder. Partial views that are in the “Shared” folder are available for all the views in the entire project, where as partial views in a specific folder are available only for the views with-in that folder.

“_Employee.cshtml” partial view code is available on my blog at the following link.

Now, make the following changes to Index.cshtml view. Notice that the view is much simplified now. To render the partial view, we are using Partial() html helper method. There are several overloaded versions of this method. We are using a version that expects 2 parameters, i.e the name of the partial view and the model object.
@model IEnumerable[MVCDemo.Models.Employee]
@foreach (var item in Model)
@Html.Partial(“_Employee”, item)


Xem thêm bài viết khác:


  1. I was looking so hard to understand this partial views… all I found in other places made me more confused than explained me things… This video is awesome

  2. Very fast and 'to the point'. Thank you very much sir, I am subscribing and you're my No1 now when I'm searching for something. Thank you again !

  3. Database se data lekar apne view page per show kara lekin ager uske side me ek button ho or use me model(popup) open hota he and use me dusre model se data pase kar k kese show karaye database se.


  4. HI kudvenkat, I eat your tutorials everydays. Thank you for you professionalism and pedagogy.
    But I have a question (it may be just a detail, but I am beginner),
    when you decide to place the _employee in the shared folder and the index in the employee folder … is it something you choose by luck, because I would put the one I want to be accessible by every other view (the list of employee : the _employee view), in the shared, and the container view in the Employee folder.
    Then in conclusion I would tend to do the opposite :
    I would put the "container" view in the folder with the model 's name,
    and the piece of html code, in the shared one to be reusable.
    is it correct ?

  5. why the item variable is declared as var ,why not Employee ?.As i see that the model is Employee type,then item should also be Employee type ,am i right?.Please somebody answer

  6. Awesome video, just suggesting this top table tag should be out side the for-each loop. tr and subsequent td table tr td can be part of partial view only.

  7. I have a product listing view and I have a partial view to create new product but it's not working(The model item passed into the dictionary is of type 'System.Collections.Generic.List`1)

  8. Earlier i found the partial view tough but it became very easy.nice explain . found few contents are blurred other than that it is just awesom ..keep it up

  9. What if i want to have the list of employees and their details in a dropdown list format so that if one employee is clicked on it takes you to a partial view page of that employee details


Please enter your comment!
Please enter your name here