What a is Partial View is and Difference Between Html.Partial and Html.RenderPartial in MVC

In this article we learn what a Partial View is and how to call a Partial View and in which scenario which method is good for the call.

What a Partial View is

A Partial View is similar to a User Control in ASP.NET.

Let's create a view for showing some records. Please read my previous article if you don't know How to Call Layout View at Run Time in MVC.

After successful creation of the project let's do some changes to our project.

1. Right-click on the model folder then select "Add" → "Class" and name it "ListEmployee.cs" and place the following code into it.
   1. namespace mvcDemo.Models  
   2. {  
   3.     public class ListEmployee  
   4.     {  
   5.         public int Id { get; set; }  
   6.         public string Name { get; set; }  
   7.         public string Email { get; set; }  
   8.     }    
   9. }  
2. Go to HomeController and write the following:
   1. public ActionResult List()  
   2. {  
   3.       List<ListEmployee> listEmployee = new List<ListEmployee>();  
   4.       listEmployee.Add(new ListEmployee() { Id = 1, Name = "Pramod", Email = "pramod@yahoo.com" });  
   5.       listEmployee.Add(new ListEmployee() { Id = 2, Name = "Ravi", Email = "ravi@yahoo.com" });  
   6.       listEmployee.Add(new ListEmployee() { Id = 3, Name = "Rahul", Email = "rahul@yahoo.com" });  
   7.       listEmployee.Add(new ListEmployee() { Id = 4, Name = "Deepak", Email = "deepak@yahoo.com" });  
   8.   
   9.       return View(listEmployee);  
   10. }  
3. Right-click on List() and hit the add view option and name it List.
   
   
   
   This will write some auto generated code in List.cshtml.
   
4. Let's make some changes in List.cshtml.
   1. @model IEnumerable<mvcDemo.Models.ListEmployee>  
   2.   
   3. @{  
   4.     ViewBag.Title = "List";  
   5. }  
   6.   
   7. <h2>Employee List</h2>  
   8.   
   9. <table>  
   10.     <tr>  
   11.         <th>  
   12.             @Html.DisplayNameFor(model => model.Id)  
   13.         </th>  
   14.         <th>  
   15.             @Html.DisplayNameFor(model => model.Name)  
   16.         </th>  
   17.         <th>  
   18.             @Html.DisplayNameFor(model => model.Email)  
   19.         </th>  
   20.     </tr>  
   21.   
   22. @foreach (var item in Model) {  
   23.     <tr>  
   24.         <td>  
   25.             @Html.DisplayFor(modelItem => item.Id)  
   26.         </td>  
   27.         <td>  
   28.             @Html.DisplayFor(modelItem => item.Name)  
   29.         </td>  
   30.         <td>  
   31.             @Html.DisplayFor(modelItem => item.Email)  
   32.         </td>  
   33.     </tr>  
   34. }  
   35.   
   36. </table>  
   Output
   

Let's make it using a Partial View.

1. Expand the Views folder then select Shared folder.
   
2. Right-click on the Shared folder then select Add View and name it _Employee. 
   
   
   
3. Let's make some changes in _Employee.cshtml.
   1. @model IEnumerable<mvcDemo.Models.ListEmployee>  
   2.   
   3. <table>  
   4.     <tr>  
   5.         <th>  
   6.             @Html.DisplayNameFor(model => model.Id)  
   7.         </th>  
   8.         <th>  
   9.             @Html.DisplayNameFor(model => model.Name)  
   10.         </th>  
   11.         <th>  
   12.             @Html.DisplayNameFor(model => model.Email)  
   13.         </th>  
   14.     </tr>  
   15.   
   16. @foreach (var item in Model) {  
   17.     <tr>  
   18.         <td>  
   19.             @Html.DisplayFor(modelItem => item.Id)  
   20.         </td>  
   21.         <td>  
   22.             @Html.DisplayFor(modelItem => item.Name)  
   23.         </td>  
   24.         <td>  
   25.             @Html.DisplayFor(modelItem => item.Email)  
   26.         </td>  
   27.          
   28.     </tr>  
   29. }  
   30.   
   31. </table>  
4. In List.cshtml delete all the code and paste in the following code.
   1. @model IEnumerable<mvcDemo.Models.ListEmployee>  
   2. @{  
   3.     ViewBag.Title = "List";  
   4. }  
   5. <h2>Employee List</h2>  
   6.   
   7. @Html.Partial("_Employee")  
5. Run the project and see the output. We will get what we expected.

Difference between Html.Partial and Html.RenderPartial

1. The RenderPartial method return type is void whereas the Partial method returns MvcHtmlString.
   
2. Syntax.
   1. Calling Html.Partial method  
   2.   
   3. @Html.Partial(“_partialViewName”);  
   4.   
   5. Calling Html.RenderPartial method  
   6.   
   7. @{Html.RenderPartial(“_partialViewName”);}  

Note: From the performance perspective rendering directly to the output steam is always better so Html.RenderPartial is a good choice if we don't need any manipulation over output. If manipulation is required over the output stream then Html.Partial is better than Html.RenderPartial.

 

Source Collected from 

http://www.c-sharpcorner.com/UploadFile/b182bf/what-is-partial-view-and-difference-between-html-partial-and/