Partial View in ASP.NET CORE

Saineshwar

6 years ago

What is a Partial View?

A Partial View is a reusable component that represents a part of a web page. Instead of duplicating common UI elements like headers, navigation menus, or forms across multiple views, we can place them in a partial view and include it wherever needed.

Common use cases of Partial Views:

Navigation Menus
Login or Registration Forms
Displaying reusable layout sections (e.g., Footer, Header)
Rendering shared data or lists (e.g., Recent Posts, User Info)

Where Are Partial Views Stored?

Partial views can be stored in:

The specific View folder of a controller (e.g., Views/Home)
The Shared folder under the Views directory (Views/Shared) for global reuse

Naming Convention:
By convention, partial view file names start with an underscore (e.g., _LoginForm.cshtml). This is not mandatory but helps indicate that the view is intended to be used as a partial.

Rendering Partial Views in ASP.NET Core

ASP.NET Core provides both synchronous and asynchronous methods to render partial views.

Synchronous Methods

@Html.Partial("PartialViewName")
@Html.RenderPartial("PartialViewName")

Asynchronous Methods

@await Html.PartialAsync("PartialViewName")
@await Html.RenderPartialAsync("PartialViewName")

Difference Between `Html.Partial` and `Html.RenderPartial`

Feature	`Html.Partial`	`Html.RenderPartial`
Return Type	`IHtmlContent` (like `MvcHtmlString`)	`void`
Output	Returns HTML markup as a string	Writes HTML directly to the response stream
Usage	Can be stored in a variable or returned	Cannot be stored, only rendered directly
Performance	Slightly slower (returns a value)	Slightly faster (writes directly to output)

Adding Model Customer

Let’s Start with adding Model with name ‘CustomerModel‘ which will be used while creating partial View.

namespace WebApplication8.Models
{
    public class CustomerModel
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Address { get; set; }
        public string Country { get; set; }
    }
}

After adding Model next we are going to add Controller with the name ‘DefaultController‘. Which has the Index Action Method in it.

using Microsoft.AspNetCore.Mvc;

namespace WebApplication8.Controllers
{
    public class DefaultController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

After adding DefaultController next we are going to add Index View.

Adding Index View (Parent View)

For Adding View just by right-clicking inside Index Action Method and from the list choose Add View option a new dialog will pop up which will have View Name same as Action Method Name ‘Index‘ next we are not going to choose Template and Model class for this View just click on Add button to create View.

After Adding Index view next we are going to partial view.

Adding partial views

For Adding partial view just right click on your shared folder choose Add-> then choose -> View.

After clicking on View Add MVC View Dialog will popup.

For adding Partial View First, we need to Set View name as we are creating a partial view, we are going to start partial View name with ‘_Demo1Partial‘. Next option which we have is to set the template in that we have various options such as ‘Create | Edit | Delete | Details | List‘ for the demo we not going to choose ‘List‘ template.

Next, we are going to choose model class, in this drop-down of model class you will see all models which are there in the application we are going to choose ‘CustomerModel‘ from the dropdown and next in options check ‘Create as a partial view‘ and click on Add button to create a Partial View.

Code snippet of _Demo1Partial.cshtml created above

@model IEnumerable<WebApplication8.Models.CustomerModel>
<h3>Child View (Partial View) </h3>
<div class="container">
    <p>
        <a asp-action="Create">Create New</a>
    </p>
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.LastName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Address)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Country)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.FirstName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LastName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Address)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Country)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

Now we have created partial view next we are going to call this partial view in the parent view.

Calling Partial View in Parent View

In this part, we are going to call a partial view in parent view and from parent view, we are going to pass data to partial view.

On Parent view, we going specific @model List<CustomerModel> and we are going to pass a list of customers from Index action method of DefaultController.

Code snippet of DefaultController

using System.Collections.Generic;	
using Microsoft.AspNetCore.Mvc;
using WebApplication8.Models;

namespace WebApplication8.Controllers
{
    public class DefaultController : Controller
    {
        public IActionResult Index()
        {
            List<CustomerModel> listofCustomers = new List<CustomerModel>();

            listofCustomers.Add(new CustomerModel()
            {
                Id = 1,
                FirstName = "Saineshwar",
                LastName = "Begari",
                Address = "Mumbai",
                Country = "India"
            });

            listofCustomers.Add(new CustomerModel()
            {
                Id = 1,
                FirstName = "Sai",
                LastName = "Begari",
                Address = "Mumbai",
                Country = "India"
            });

            return View(listofCustomers);
        }
    }
}

Next, we are going to call a partial view in parent view ‘Index‘.

Synchronous HTML Helper

Using Html.Partial

@model List<CustomerModel>

<div class="alert alert-primary">
    <div class="container">
        <h1>Parent View</h1>
    </div>
    <div class="alert alert-success">
        @Html.Partial("_Demo1Partial.cshtml", Model)
    </div>
</div>

Using Html.RenderPartial

@model List<CustomerModel>

<div class="alert alert-primary">
    <div class="container">
        <h1>Parent View</h1>
    </div>
    <div class="alert alert-success">
        @{
            Html.RenderPartial("_Demo1Partial.cshtml", Model);
        }

    </div>
</div>

Asynchronous HTML Helper

Using Html.PartialAsync

@model List<CustomerModel>

<div class="alert alert-primary">
    <div class="container">
        <h1>Parent View</h1>
    </div>
    <div class="alert alert-success">
        @await Html.PartialAsync("_Demo1Partial.cshtml", Model);
    </div>
</div>

Using Html.RenderPartialAsync

@model List<CustomerModel>

<div class="alert alert-primary">
    <div class="container">
        <h1>Parent View</h1>
    </div>
    <div class="alert alert-success">
        @{
            await Html.RenderPartialAsync("_Demo1Partial.cshtml", Model);
        }
    </div>
</div>

This is various ways to render Partial View using html tag helper.

The output of All Partial View is similar

Tag Helper
Render partial view Using New Tag helper.

Code Snippet

@model List<CustomerModel>
<partial name="_Demo1Partial.cshtml" model="Model" />

Conclusion

Partial Views in ASP.NET Core provide a clean and efficient way to build reusable UI components. They help in maintaining DRY (Don’t Repeat Yourself) principles and speed up development time.

Whether you use Html.Partial, Html.RenderPartial, or their async equivalents, they all serve the purpose of improving UI maintainability and code modularity in your ASP.NET Core applications.