Different Ways to Render Partial View in ASP.NET Core MVC

Back to: ASP.NET Core Tutorials For Beginners and Professionals

Different Ways to Render Partial View in ASP.NET Core MVC

In this article, I am going to discuss Different Ways to Render a Partial View in ASP.NET Core MVC Application with Examples. Please read our previous article discussing Partial Views in ASP.NET Core MVC Applications. We will work with the same example we created in our previous article.

Different Ways to Render Partial View in ASP.NET Core MVC

In ASP.NET Core MVC Application, we can render a partial view using the following ways:

  1. Html.Partial
  2. Html.PartialAsync
  3. Html.RenderPartial
  4. Html.RenderPartialAsync
  5. Partial Tag Helper
Example to Understand How to Render Partial View:

So, basically, we will use the same example we created in our previous article. The following is the Product Controller class.

using Microsoft.AspNetCore.Mvc;
using PartialViewInMVC.Models;
namespace PartialViewInMVC.Controllers
{
    public class ProductController : Controller
    {
        private List<Product> products = new List<Product>();
        public ProductController()
        {
            products = new List<Product>()
            {
                new Product { ProductID =1, Name ="Product 1", Category = "Category 1", Description ="Description 1", Price = 10m},
                new Product { ProductID =2, Name ="Product 2", Category = "Category 1", Description ="Description 2", Price = 20m},
                new Product { ProductID =3, Name ="Product 3", Category = "Category 1", Description ="Description 3", Price = 30m},
                new Product { ProductID =4, Name ="Product 4", Category = "Category 2", Description ="Description 4", Price = 40m},
                new Product { ProductID =5, Name ="Product 5", Category = "Category 2", Description ="Description 5", Price = 50m},
                new Product { ProductID =6, Name ="Product 6", Category = "Category 2", Description ="Description 6", Price = 50m}
            };
        }

        public ActionResult Index()
        {
            return View(products);
        }
        
        public ActionResult Details(int Id)
        {
            var ProductDetails = products.FirstOrDefault(prd => prd.ProductID == Id);
            return View(ProductDetails);
        }
    }
}

Next, modify the _ProductDetails.cshtml Partial View file as follows:

@model PartialViewInMVC.Models.Product
<table class="table">
    <tr>
        <th>
            ProductID
        </th>
        <th>
            Name
        </th>
        <th>
            Category
        </th>
        <th>
            Description
        </th>
        <th>
            Price
        </th>
    </tr>

    <tr>
        <td>
            @Model?.ProductID
        </td>
        <td>
            @Model?.Name
        </td>
        <td>
            @Model?.Category
        </td>
        <td>
            @Model?.Description
        </td>
        <td>
            @Model?.Price
        </td>
    </tr>
</table>
Render a Partial view using @Html.Partial() Method in ASP.NET Core MVC:

The Html.Partial() is an Html helper method and is available in Microsoft.AspNetCore.Mvc.Rendering namespace. There are 4 overloaded versions of the Partial method available, as shown in the below image. And we can use any one of them as per our requirement.

Render a Partial view using @Html.Partial() Method in ASP.NET Core MVC

Parameters:

  • htmlHelper: The HTML helper instance that this method extends
  • partialViewName: The name of the partial view to render
  • viewData: The view data dictionary for the partial view.
  • model: The model for the partial view.

Returns: The partial view that is rendered as an HTML-encoded string.

Important features of @Html.Partial() html helper –

  • This works in synchronous mode
  • Familiar with ASP.NET MVC 5 developers.
  • The return type of this method is IHtmlContent. Hence its output can be stored in a variable.
  • The Partial() Helper method in ASP.NET Core MVC is a method that returns an IHtmlContent. In Razor, you can call a property or a method that returns such a string with just a @ prefix to distinguish it from plain HTML.
  • Renders the partial view as an HTML-encoded string.
  • This method result can be stored in a variable since it returns a string type value.
  • Simple to use and no need to create any action.
  • The Partial method is useful when displaying data in the partial view is already in the corresponding view model.

To render a partial view using @Html.Partial() html helper, please modify the Details.cshtml file of the Product controller as shown below. Here, _ProductDetails is the name of the partial view file, and Model is the model object.

@model PartialViewInMVC.Models.Product

@{
    ViewData["Title"] = "Details";
}
<div>
    <h4>Product Details</h4>
    <p>Rendering the Result of Partial View</p>
    @Html.Partial("_ProductDetails", Model)
    <br/>
    <p>Storing the Result of Partial View into a variable</p>
    @{
        var result = Html.Partial("_ProductDetails", Model);
    }
    <span>@result</span>
</div>
Render a Partial view using @Html.PartialAsync() Method in ASP.NET Core MVC:

Html.PartialAsync() HTML Helper Method is the async version of Html.Partial() Method. The Html.PartialAsync is also an Html helper and is available in Microsoft.AspNetCore.Mvc.Rendering namespace. There are 3 overloaded versions of this Html.PartialAsync method is available as follows. And you can use any one of them as per your requirement.

Render a Partial view using @Html.PartialAsync() Method in ASP.NET Core MVC

Important features of @Html.PartialAsync() html helper –

  • This works in async mode.
  • The return type of this method is IHtmlContent. Hence its output can be stored in a variable.

To render a partial view using @Html.PartialAsync() html helper, please modify the Details.cshtml file of the Product controller as shown below. Here, _ProductDetails is the name of the partial view file, and Model is the model object. Here, we must use await keyword as this method works asynchronously.

@model PartialViewInMVC.Models.Product

@{
    ViewData["Title"] = "Details";
}
<div>
    <h4>Product Details</h4>
    <p>Rendering the Result of Partial View</p>
    @await Html.PartialAsync("_ProductDetails", Model)
    <br/>
    <p>Storing the Result of Partial View into a variable</p>
    @{
        var result = await Html.PartialAsync("_ProductDetails", Model);
    }
    <span>@result</span>
</div>
Render a Partial view using @Html.RenderPartial() Method in ASP.NET Core MVC:

Html.RenderPartial is also an Html helper method used for rendering a partial view and is available in Microsoft.AspNetCore.Mvc.Rendering namespace. There are 4 overloaded versions of the RenderPartial method available, as shown in the below image. And you can use any one of them as per your requirement.

Render a Partial view using @Html.RenderPartial() Method in ASP.NET Core MVC

Parameters:

  • htmlHelper: The HTML helper instance that this method extends
  • partialViewName: The name of the partial view.
  • viewData: The view data for the partial view.
  • model: The model for the partial view.

Important features of @Html.RenderPartial() html helper –

  • This works in sync mode.
  • The return type of this method is void. Hence its output is written directly to the response stream.
  • RenderPartial() is a void method that writes the output directly to the response stream. The “void” method needs a “;” and hence must be enclosed by { }.
  • This method result will be directly written to the HTTP response stream. That means this method generates the response as part of the same HTTP response of the main view.
  • This method returns void.
  • Simple to use and no need to create any action.
  • This method is faster as its result is directly written to the response stream, making it fast.

To render a partial view using @Html.RenderPartial() html helper, please modify the Details.cshtml file of the Product controller as shown below. Here, _ProductDetails is the name of the partial view file, and Model is the model object. This method works synchronously.

@model PartialViewInMVC.Models.Product

@{
    ViewData["Title"] = "Details";
}
<div>
    <h4>Product Details</h4>
    <p>Rendering the Result of Partial View</p>
    @{
        Html.RenderPartial("_ProductDetails", Model);
    }
</div>
Difference Between @Html.Partial and @Html.RenderPartial in ASP.NET Core MVC:

If you observe both @Html.Partial and @Html.RenderPartial work in the same manner, there is a big difference between these two methods. The difference between @Html.Partial and @Html.RenderPartial is available in the return type of these methods.

@Html.Partial returns IHtmlContent while @Html.RenderPartial returns void. Hence, The @Html.RenderPartial method is fast as compared to @Html.Partial because its output is written directly to the response stream.

Render a Partial view using @Html.RenderPartialAsync() Method in ASP.NET Core MVC:

The Html.RenderPartialAsync() Method is the async version of @Html.RenderPartal(), which is also used for rendering a partial view and is available in Microsoft.AspNetCore.Mvc.Rendering namespace. 3 overloaded versions of the RenderPartialAsync method are available, as shown in the image below. And you can use any one of them as per your requirement.

Render a Partial view using @Html.RenderPartialAsync() Method in ASP.NET Core MVC

Important features of @Html.RenderPartial() html helper –

  • This works in async mode.
  • The return type of this method is void. Hence its output is written directly to the response stream.

To render a partial view using @Html.RenderPartialAsync() html helper, please modify the Details.cshtml file of the Product controller as shown below. Here, _ProductDetails is the name of the partial view file, and Model is the model object. Here, we must use await keyword as this method works asynchronously.

@model PartialViewInMVC.Models.Product

@{
    ViewData["Title"] = "Details";
}
<div>
    <h4>Product Details</h4>
    <p>Rendering the Result of Partial View</p>
    @{
        await Html.RenderPartialAsync("_ProductDetails", Model);
    }
</div>
Rending Partial View using Partial Tag Helper in ASP.NET Core MVC

Partial tag helper is the newly introduced tag helper in ASP.NET Core MVC Application for rendering a Partial View. Rendering a partial view using a partial tag helper is the easiest and recommended approach by Microsoft. Important features of Partial tag helper –

  • Easy to use
  • HTML like syntax
  • The partial tag works in async mode
  • Newly introduced tag helper in ASP.NET Core

To render a partial view using the partial tag helper, please modify the Details.cshtml file of the Product controller as shown below.

@model PartialViewInMVC.Models.Product

@{
    ViewData["Title"] = "Details";
}
<div>
    <h4>Product Details</h4>
    <p>Rendering the Result of Partial View</p>

    <partial name="_ProductDetails" model="Model" />

</div>

Let’s discuss the details of this partial tag helper –

  • Tag name – The name of the tag is partial. <partial /> is a self-closing tag helper.
  • Partial view name – We can use the name attribute of the partial tag to write the name of the partial view.
  • Pass data (Model) to the partial view – We can use the model attribute of the partial tag to pass the model to the partial view.
Partial View with ViewData in ASP.NET Core MVC:

Now, let us understand how to create a partial view that will accept a model object as well as a ViewData. So, modify the _ProductDetails.cshtml partial view as follows. As you can see, we are using the Product model as well as a ViewData for displaying the header.

@model PartialViewInMVC.Models.Product
@{
    var heading = ViewData["Header"];
}
<h2>@heading</h2>
<table class="table">
    <tr>
        <th>
            ProductID
        </th>
        <th>
            Name
        </th>
        <th>
            Category
        </th>
        <th>
            Description
        </th>
        <th>
            Price
        </th>
    </tr>

    <tr>
        <td>
            @Model?.ProductID
        </td>
        <td>
            @Model?.Name
        </td>
        <td>
            @Model?.Category
        </td>
        <td>
            @Model?.Description
        </td>
        <td>
            @Model?.Price
        </td>
    </tr>
</table>

Next, modify the Details.cshtml view of the Product controller as follows. Here, I show how to call the partial view using ViewData with all five approaches.

@model PartialViewInMVC.Models.Product

@{
    ViewData["Title"] = "Details";
    ViewData["Header"] = "Product Details";
}
<div>
    
    <p>Using Tag Helper</p>
    <partial name="_ProductDetails" model="Model" view-data="ViewData" />

    <p>Using Html.Partial</p>
    @Html.Partial("_ProductDetails", Model, ViewData)
    
    <p>Using Html.PartialAsync</p>
    @await Html.PartialAsync("_ProductDetails", Model, ViewData)
    
    <p>Using Html.RenderPartial</p>
    @{
        Html.RenderPartial("_ProductDetails", Model, ViewData);
    }
    
    <p>Using Html.RenderPartialAsync</p>
    @{
        await Html.RenderPartialAsync("_ProductDetails", Model, ViewData);
    }

</div>

In the next article, I am going to discuss View Components in ASP.NET Core MVC Applications with Examples. In this article, I try to explain Different ways to Render a Partial View in ASP.NET Core MVC Applications with Examples. I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *