5 ways to render a partial view in asp.net core

In asp.net core, a partial view is the main building block of any web application. Creating a partial view in asp.net core is very easy but the way you render a partial view on your main view, that makes the difference.

What is a partial view in asp.net core?

In asp.net core, a partial view is a .cshtml (Razor markup) file that is used to render its content (Html + Server side language code) within other view’s file output.

Why do we use a partial view in asp.net core application?

We generally use a partial view to resolve the following two issues in a web application :

1. Breakup the large view file into some small components.
2. Remove the markup code duplication.

In the concept of a partial view, the way we render or use it on other main views that makes a large impact.

Watch this video to learn more about partial view in asp.net core –

What are the different ways to render a partial view in asp.net core?

In Asp.Net Core we can render a partial view using the following ways:

• Tag helper
  1. Partial tag helper
• Html Helper
  1. Html.Partial
  2. Html.PartialAsync
  3. Html.RenderPartial
  4. Html.RenderPartialAsync

Lets try to learn all the methods one by one.

Setting up the basic things :

To learn the concept of partial view, lets setup few basic things. Suppose we have :

• A model with the name BookModel.cs

public class BookModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
}

• A partial view with name _bookThumbnail.cshtml

@model BookModel
<div>
    <ul>
        <li>Id - @Model.Id</li>
        <li>Name - @Model.Name</li>
        <li>Author - @Model.Author</li>
    </ul>
</div>

And suppose, I want to render this partial view on an index.chtml file.

Let’s start the rendering or partial view –

@model IEnumerable<BookModel>

@foreach (var book in Model)
{
    // Insert partial view code here
}

(#1) Partial tag helper –

Partial tag helper is the newly introduced tag helper in asp.net core. Rendering a partial view using a partial tag helper is the easiest and recommended approach.

Here are the overloaded versions of Html.Partial –

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName);

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, object model);

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, object model, ViewDataDictionary viewData);

Render a partial view using partial tag helper –

<partial name="_bookThumbnail" model="@book" />

Lets 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.

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

(#2) Render a partial view using @Html.Partial()-

Html.Partial is an Html helper and is available in Microsoft.AspNetCore.Mvc.Rendering namespace.

There are 4 overloaded versions of @Html.Partial method. And we can use anyone of them as per our requirement. Here is the details of all overloaded versions –

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName);

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, object model);

public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, object model, ViewDataDictionary viewData);

Render a partial view using @Html.Partial() html helper –

@Html.Partial("_bookThumbnail", book)

Here, _bookThumbnail is the name of partial view file and book is the model object.

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

• This works in sync mode
• Familiar to asp.net mvc 5 developers.
• The return type of this method is IHtmlContent. Hence its output can be stored in a variable.

(#3) Render a partial view using @Html.PartialAsync()-

Html.PartialAsync() is the async version of Html.Partial(). Html.PartialAsync is also an Html helper and is available in Microsoft.AspNetCore.Mvc.Rendering namespace.

Here are the overloaded versions of Html.PartialAsync –

public static Task<IHtmlContent> PartialAsync(this IHtmlHelper htmlHelper, string partialViewName);

public static Task<IHtmlContent> PartialAsync(this IHtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

public static Task<IHtmlContent> PartialAsync(this IHtmlHelper htmlHelper, string partialViewName, object model);

Render a partial view using @Html.PartialAsync() html helper –

 @await Html.PartialAsync("_bookThumbnail", book)

Here, we must use await keword as this method works asynchronously.

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.

(#4) Render a partial view using @Html.RenderPartial()-

@Html.RenderPartial() is also an HTML helper, used for rendering a partial view and it is available in Microsoft.AspNetCore.Mvc.Rendering namespace.

Here are the overloaded methods of @Html.RenderPartial() –

public static void RenderPartial(this IHtmlHelper htmlHelper, string partialViewName);

public static void RenderPartial(this IHtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

public static void RenderPartial(this IHtmlHelper htmlHelper, string partialViewName, object model);

public static void RenderPartial(this IHtmlHelper htmlHelper, string partialViewName, object model, ViewDataDictionary viewData);

Render a partial view using @Html.RenderPartial() html helper –

@{ 
  Html.RenderPartial("_bookThumbnail", book); 
 }

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.

If you will notice that @Html.Partial & @Html.RenderPartial both work in same manner but there is actually a big difference in between these methods.

Difference between @Html.Partial & @Html.RenderPartial –

The difference between @Html.Partial & @Html.RenderPartial is available in the return type of these methods.

(#5) Render a partial view using @Html.RenderPartialAsync()-

@Html.RenderPartialAsync() is the async version of @Html.RenderPartal()

Here are the overloaded methods of @Html.RenderPartialAsync() –

public static Task RenderPartialAsync(this IHtmlHelper htmlHelper, string partialViewName);

public static Task RenderPartialAsync(this IHtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

public static Task RenderPartialAsync(this IHtmlHelper htmlHelper, string partialViewName, object model);

Render a partial view using @Html.RenderPartialAsync() html helper –

@{ 
  await Html.RenderPartial("_bookThumbnail", book); 
 }

Important features of @Html.RenderPartialAsync() 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.

Here is the video version of all these methods: