Different Ways Of Rendering Partial View In MVC

In this article, we will understand the basics of the partial view, different ways of rendering partial view, and uses of partial view.

Partial View

 
A partial view is a Razor markup file (.cshtml) that renders HTML output within another markup file. Partial view is not a complete view. Partial view is used for reusability of the HTML markup.

Different ways of rendering partial view

 
There are 5 different way of rendering a partial view.
  1. Partial
  2. Render partial
  3. Action
  4. Render action
  5. JQuery load function

When to use a partial view?

  • To break up large markup files into smaller components.
  • To reduce the duplication of common markup content across markup files.
  • Partial views shouldn't be used to maintain common layout elements. Common layout elements should be specified in the _Layout.cshtml files.

Difference between RenderPartial and Partial

 
Partial
 
The partial method returns an MvcHtmlString object. Basically, it stringifies the HTML content in the location where it was specified.

RenderPartial

The RenderPartial method will not actually return any values or strings and instead, it will write the Partial View that is requested to the Response Stream through response.write internally.
 

Difference between RenderAction and Action

 
RenderAction
 
The RenderAction method renders the result directly to the response which means it is more efficient if the action returns a large amount of HTML.

Action

Action method returns a string with the result.
 
Let's see this via an example. 

Step 1

Open Visual Studio 2015 or an IDE of your choice and create a new project.

Step 2

Choose web application project and give an appropriate name to your project.
 
Different Ways Of Render Partial View In MVC 

Step 3

Select empty template, check on MVC checkbox below, and click OK.
 
Different Ways Of Render Partial View In MVC 

Step 4

Right click on the Models folder and add a database model. Add Entity Framework now. For that, right-click on Models folder, select Add, then select "New Item".
 
Different Ways Of Render Partial View In MVC 

You will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name EmployeeModel (this name is not mandatory, you can give any name) and click "Add".

Different Ways Of Render Partial View In MVC 

After you click on "Add a window", the wizard will open. Choose EF Designer from the database and click "Next".

Different Ways Of Render Partial View In MVC 

After clicking on "Next", a window will appear. Choose "New Connection". Another window will appear. Add your server name - if it is local, then enter dot (.). Choose your database and click "OK".

Different Ways Of Render Partial View In MVC 

The connection will be added. If you wish, save the connection name as you want. You can change the name of your connection below. It will save the connection in the web config. Now, click "Next"

Different Ways Of Render Partial View In MVC 

After clicking on NEXT, another window will appear. Choose the database table name as shown in the below screenshot and click "Finish".

Different Ways Of Render Partial View In MVC 

Entity Framework gets added and the respective class gets generated under the Models folder.

Step 5

Right click on controllers folder add a controller.
 
Different Ways Of Render Partial View In MVC 

A window will appear. Choose MVC5 Controller-Empty and click "Add".

Different Ways Of Render Partial View In MVC 

After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home;

Different Ways Of Render Partial View In MVC 

Complete code for Home Controller

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcPartialView_Demo.Models;  
  7.    
  8. namespace MvcPartialView_Demo.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         private readonly EmployeeContext _dbContext=new EmployeeContext();  
  13.    
  14.         public ActionResult Index()  
  15.         {  
  16.             var employee = _dbContext.Employees.ToList();  
  17.             return View(employee);  
  18.         }  
  19.    
  20.         public PartialViewResult Employee()  
  21.         {  
  22.             return PartialView("_employee");  
  23.         }  
  24.     }  
  25. }  

Step 6

Right-click on Index method in HomeController. The "Add View" window will appear with default index name checked (use a Layout page), and click on "Add.
 
Different Ways Of Render Partial View In MVC 

Html.Partial

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>List of Employee</h3>  
  6. @Html.Partial("_employee")  

Html.RenderPartial

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>List of Employee</h3>  
  6. @{  
  7.     Html.RenderPartial("_employee");  
  8. }  

Html.Action

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>List of Employee</h3>  
  6. @{  
  7.     @Html.Action("Employee")  
  8. }  

Html.RenderAction

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>List of Employee</h3>  
  6. @{  
  7.     Html.RenderAction("Employee");  
  8. }  
JQuery load function 
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4. <script src="~/Scripts/jquery-3.3.1.min.js"></script>  
  5. <h3>List of employee</h3>  
  6. <div id="partialView">  
  7. </div>  
  8. <script type="text/javascript">  
  9.     $(document).ready(function() {  
  10.         $("#partialView").load('@Url.Content("/Home/Employee")');  
  11.     });  
  12. </script>  

Step 7

Right-click on the "Shared" folder index views folder add a view name it _employee checked on create as a partial view, and click on "Add".
 
Different Ways Of Render Partial View In MVC 

Code for partial view

  1. @model IEnumerable<MvcPartialView_Demo.Models.Employee>  
  2.    
  3. <table class="table table-bordered">  
  4.     <thead>  
  5.     <tr>  
  6.         <th>@Html.DisplayNameFor(m=>m.Name)</th>  
  7.         <th>@Html.DisplayNameFor(m=>m.Gender)</th>  
  8.         <th>@Html.DisplayNameFor(m=>m.Age)</th>  
  9.         <th>@Html.DisplayNameFor(m=>m.Position)</th>  
  10.         <th>@Html.DisplayNameFor(m=>m.Office)</th>  
  11.         <th>@Html.DisplayNameFor(m=>m.HireDate)</th>  
  12.         <th>@Html.DisplayNameFor(m=>m.Salary)</th>  
  13.     </tr>  
  14.     </thead>  
  15.     <tbody>  
  16.     @foreach (var emp in Model)  
  17.     {  
  18.         <tr>  
  19.             <td>@emp.Name</td>  
  20.             <td>@emp.Gender</td>  
  21.             <td>@emp.Age</td>  
  22.             <td>@emp.Position</td>  
  23.             <td>@emp.Office</td>  
  24.             <td>  
  25.                 @if (emp.HireDate != null)  
  26.                 {  
  27.                     @emp.HireDate.Value.ToString("dd/MM/yyyy")  
  28.                 }  
  29.             </td>  
  30.             <td>@emp.Salary</td>  
  31.         </tr>  
  32.     }  
  33.     </tbody>  
  34. </table>  

Step 8

Build and run your project by pressing CTRL+F5.
 
Different Ways Of Render Partial View In MVC