w3resource

ASP.NET Partial View in ASP.NET MVC


In this section you will learn about reusable components otherwise known as partial views on ASP.NET MVC.

Partial view is a reusable view, which can be used as a child view in other view files. It enables code usability and eliminates duplication of codes. The partial views can be used in the layout views or in the ordinary view.

For illustration, we will create a simple partial view for the footer, just for demo purposed. This partial view we will create will be used in all other view files throughout our project.

Creating a Partial View

To create a partial view, right click on Shared folder -> select Add -> click on View the in the popup dialog box, enter the name of the partial view and thick the create as partial view option as shown in the screenshot below:

asp.net creating a partial view

Note:

If you intend to use the partial view in views of different controller, then it should be created in the Shared folder, otherwise you can create the partial view in the same folder where you intend using it.

After creating the footer partial view, cut the footer codes from out index page and paste it in the Footer.cshtml we just created like shown in the below example code snippet.

Example: Partial View Footer.cshtml

<footer>

      <p>© @DateTime.Now.Year - ActivitiesTab</p>

 </footer>

Thus, we have created a new partial view. Let's now see how to render partial view.

Rendering Partial View

You can render a partial view in the parent view using html helper methods like: Partial(), RenderPartial() or RenderAction(). Each of these method serves different purposes. Let's have an illustration of each of these methods and then see how to render partial view using them.

Html.Partial()

@Html.Partial() helper method renders the specified partial view passed as parameter. It accepts partial view name as a string parameter and returns MvcHtmlString. It returns html string, so you have a chance of modifying the html before rendering.

Html.RenderPartial()>

The RenderPartial helper method is same as the Partial method except that it returns void and writes resulted html of a specified partial view into a http response stream directly.

Html.RenderAction()

The RenderAction helper method invokes a specified controller and action and renders the result as a partial view. The specified Action method should return PartialViewResult using the Partial() method.

The above three methods can be overloaded, just like every other methods. For a complete list of their overloads, kindly refer to the MSDN documentations.

So far, using the above render methods we can render the Footer partial view into _Layout.cshtml. The following layout view renders partial view using the RenderPartial() method.

Example: Html.RenderPartial()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>@ViewBag.Title - ActivityTab</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container body-content">
        @RenderBody()
        <hr />
    @{
      Html.RenderPartial("Footer");   
    }

    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

Note:

Observe from the above code snippet the use of braces and the semi colon after the RenderPartial method. They are required when using RenderPartial to render a partial view in ASP.NET MVC.

In the following layout view, we will use the Partial method to render partial view Footer.cshtml.

Example: Html.Partial()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>@ViewBag.Title - ActivityTab</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    
    <div class="container body-content">
        @RenderBody()
        <hr />
        @Html.Partial("Footer")    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Note:

Notice that @Html.Partial() method doesn't need to be in code block or semi colon because it returns a html string.