Partial View in ASP.NET CORE

Partial View in ASP.NET CORE

A View which is rendered inside another view is known as a partial view. Partial view is reusable which helps us to reduce code duplication.
The main use of partial view done for rendering Navigation Menu, developing Common input forms, Rendering Common Data.
Partial view is stored in the View folder or Shared folder which is inside the View folder.
The partial view always starts with underscore in prefix which helps to find it easier while developing application.

ASP.NET Core we have 2 ways to render partial view.

•  Sync
  • Html.Partial
  • Html.RenderPartial 

•  Async
  • Html.PartialAsync
  • RenderPartialAsync  

What is the difference in Partial and Render Partial?
Html.Partial returns a MvcHtmlString, the MvcHtmlString which we can store and used.
Html.RenderPartial returns void which cannot be stored.
Html.RenderPartial returns void and the outputs are written directly to the output stream which renders faster as compare to Html.Partial which returns a MvcHtmlString.

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" />