How To Use Partial View in MVC with Example


This article explains how you can use Partial View in your MVC application. It describes different methods to render partail view in MVC with example.

You can use Partial Views in your main views by following methods.

  1. Html.RenderPartial
  2. Html.Partial
  3. Html.RenderAction
  4. Html.Action
  5. jQuery load function

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.

    Add Partial View in ASP.NET MVC application

    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.

    Partial View example in MVC

Download Source code

Speak your mind :
Leave a comment for this article on dotnetbloogers.com
User profile picture on dotnetmentors.com

by Abhi at 8/8/2016 3:32:00 AM
we need to render action on a view to show partial view on it with data
post comment on dotnetmentors.com
User profile picture on dotnetmentors.com

by jahan at 12/24/2016 7:15:00 PM
when I am using render action it shows my partial view + all my navegation bar and rest of the page. but I needed only to show my partial view. when I use @{html.partial("showMap");} it does not show anything please help
post comment on dotnetmentors.com
User profile picture on dotnetmentors.com

by Laxmikant at 12/27/2016 12:34:00 AM
@Abhi, you will have to use model which can be bind with view. Check - http://dotnetmentors.com/mvc/render-partialview-with-model.aspx
post comment on dotnetmentors.com