How To Use Partial View in MVC with Example

Follow below steps to use Partial View using different ways.

1. Create MVC application

   Open your Visual Studio and create a new web application. Use empty MVC template. For more details on creating simple MVC application you can visit beginner tutorial for ASP.NET MVC.

   Add HomeController under Controllers folder. You will have a Index Action Method in HomeController. Right click on Index action method and select Add View. Keep name as Index and other settings as it is.

   It creates Index.cshtml file under Views -> Home folder.

   
   

2. Add Partial View

   In this step you will add a Partial View with name address.

   Right click on Shared folder and select Add -> View. In Add View dialog box give View Name as _address and check Create Partial View option.

   

   ViewEngine generates View Result as part of ASP.NET MVC application request life cycle.

   Add below HTML to _address.cshtml

   <table>
       <tr>
           <td>
             <strong>@Html.Label("Name : ")</strong>
           </td>
           <td>
               @Html.TextBox("txtName")
           </td>
       </tr>
       <tr>
           <td>
               <strong>@Html.Label("Add1 : ")</strong>
           </td>
           <td>
               @Html.TextBox("txtAdd1")
           </td>
       </tr>
       <tr>
           <td>
               <strong>@Html.Label("Add2 : ")</strong>
           </td>
           <td>
               @Html.TextBox("txtAdd2")
           </td>
       </tr>
       <tr>
           <td>
               <strong>@Html.Label("City : ")</strong>
           </td>
           <td>
               @Html.TextBox("txtCity : ")
           </td>
       </tr>
       <tr>
           <td>
               <strong>@Html.Label("Zip : ")</strong>
           </td>
           <td>
               @Html.TextBox("txtZip")
           </td>
       </tr>
   </table> 
                   

   
   

3. Html.RenderPartial

   In this step you will use Html.RenderPartial helper method to render _address partial view.

   Open Index.cshtml file from Views -> Home folder and add below HTML code.

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

   This method generates response as part of same HTTP response of main view. It uses same TextWriter object used by current web page.

   If you have model associated with View and model required for partial view is part of ViewModel then RenderPartial method is ideal to use.

   It works when you have partial view located in Shared. If your partial view located in different folder or in ASP.NET MVC Area then you will have to mention full path of view.

   @Html.RenderPartial("~/Areas/Admin/Views/Shared/partial/_subcat.cshtml")
                   

   
   

4. Html.Partial

   In this step you will render _address partial view using Html.Partial helper method.

   Open Index.cshtml and add below HTML code to it. Which adds _

   <div>
       @Html.Partial("_address")
   </ div>
                   

   It renders _address partial view as HTML encoded string. The returned HTML encoded string can be stored in variable.

   Like Html.RenderPartial it is useful when required data of partial view is a part of parent view model.

   
   

5. Html.RenderAction

   For rendering partial view using Html.RenderAction, you required Controller Action Method which returns PartialViewResult.

   Open Index.cshtml file and add below html to it.

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

   Open HomeController.cs file from Controllers folder. Add below child action method with name GetAddress.

   [ChildActionOnly]
   public PartialViewResult GetAddress()
   {
       return PartialView("_address"); 
   }
                   

   Notice that it has use ChildActionOnly attribute. It is used for PartialViewResult. The action methods used with ChildActionOnly will not be used for routing browser request. You can see more example on ASP.NET MVC Routing.

   Like Html.RenderPartial, RenderAction also returns output to the same HTTP Response stream of parent web page.

   Html.RenderAction is useful when partial view data is independent of parent model. For example when you display generic Offers on your product pages where offer may not be related to current product.

   
   

6. Html.Action

   You can render partial view using Html.Action helper method.

   Like Html.RenderAction it requires controller child action method which return PartialViewResult.

   Open Index.cshtml file and add below html to it.

   <div>
       @Html.Action("GetAddressAction")
   </ div>
                   

   Open HomeController.cs file from Controllers folder. Add below action method with name GetAddressAction.

   [ChildActionOnly]
   public ActionResult GetAddressAction()
   {
       return PartialView("_address"); 
   }
                   

   It returns HtmlString and can be saved in variables.

   Html.Action is also useful when partial view data is independent of parent model

   You can also use parameters and decide what data to provide or which Partial View to render.

   Below is the example which provides billing as parameter to ActionWithParameter action method.

   <div>
       @Html.Action("ActionWithParameter", new { category = "billing" })
   </ div>
   
                   

   Action method code

   [ChildActionOnly]        
   public ActionResult ActionWithParameter(string category)
   {
       if(category == "billing")
           return PartialView("_billingaddress");
   
       return PartialView("_shippingaddress");
   }        
                   

   You can also use parameter in same way with Html.RenderAction.

   
   

7. Render Partial View Using jQuery

   You can load your partial view using jQuery load method. It makes ajax request to controller action method and load output in html control like div.

   Add div in index.cshtml file as shown in below and add a script to load output of action method GetAddressForjQuery.

   <div id="partialviews">
   
   </div>
   
   
   
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   <script type="text/jscript">     
       $(document).ready(function () {        
           $("#partialviews").load('/home/GetAddressForjQuery');        
       });        
   </script> 
                   

   Add controller action method

   public PartialViewResult GetAddressForjQuery(string category)
   {
       return PartialView("_address");
   }
                   

   It generates below output.