During this session of ASP.NET Core Tutorial we discuss about Partial View and the way that we can call a Partial View within or main Views. Also, we will talk about differences between calling methods.
What is Partial View?
Partial View is reusable part of main View with specific logic that can be used in different Views. Thus, due to remove duplicate codes, we can create a Partial View from that part and call it in different Views.
Partial View discovery is same as Views that we described during Session 17. Moreover, you can change this default discovery as we discussed earlier with entering full path of Partial View. Also, structure and file extension of Partial View is same as View (cshtml for C# programming language and vbhtml for VB programming language).
Hence, based on above default discovery, it is recommended to create our Partial View inside Shared folder in case we have plan to call this Partial View in different Views from different Controllers.
Create Partial View
First, we create a Shared folder inside Views folder, then we create a View inside created folder. Lastly, we insert the peace of code that we want to have as Partial View.
|
1 2 3 4 5 6 7 8 9 10 11 |
@model DailyCostWebApplication.Models.Cost <tr> <td>@Model.ID</td> <td>@Model.Amount</td> <td>@Model.Category</td> <td>@Model.Comment</td> </tr> |
Call Partial View with HTML Helper
In this session we introduce four HTML Helper that we can use to call our Partial View inside our main View. But two of them (Html.Partial & Html.RenderPartial) are not recommended as they are Synchronize method as may cause Deadlock. Having said that, overloads of Synchronize and Asynchronous version of both html helpers are the same and input parameters are equal.
- Html.Partial – Synchronize Method
- Html.PartialAsync – Asynchronous Method
- Html.RenderPartial – Synchronize Method
- Html.RenderPartialAsync – Asynchronous Method
Just bear in mind, in case of using Asynchronous methods, we should user await prefix. Also, Html.Partia and Html.PartialAsync should be started with @ and they don’t need to be terminated with semicolon “;“. But Html.RenderPartial and Html.RenderPartialAsync should be inside C# code block @{} and we should add semicolon “;” to the end of these method code line.
Furthermore, Html.Partia and Html.PartialAsync have IHtmlContent result which return to main View (the view that call partial view), but, Html.RenderPartial and Html.RenderPartialAsync result is void and the result will be shown in final response as an Html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@model IEnumerable<DailyCostWebApplication.Models.Cost> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table> <thead> <tr> <td>ID</td> <td>Amount</td> <td>Category</td> <td>Comment</td> </tr> </thead> <tbody> @foreach (var cost in Model) { @await Html.PartialAsync("_CostList_PartialView", cost) } </tbody> </table> </body> </html> |
Above code present calling Partial View with Html.PartialAsync() method, also if you want to call it with Html.RenderPartialAsync() method. Just replace line 22 with below code.
|
1 2 3 4 5 |
await Html.RenderPartialAsync("_CostList_PartialView", cost); |
Call Partial View with Tag Helper
For using Tag Helper within our Views, we should inject them to our View.
|
1 2 3 4 5 |
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers |
Then we can replace Partial tag helper with above Html Helpers.
|
1 2 3 4 5 |
<partial name="_CostList_PartialView" model="cost"/> |
Below code is related to full View code with Partial Tag Helper.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@model IEnumerable<DailyCostWebApplication.Models.Cost> @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table> <thead> <tr> <td>ID</td> <td>Amount</td> <td>Category</td> <td>Comment</td> </tr> </thead> <tbody> @foreach (var cost in Model) { <partial name="_CostList_PartialView" model="cost"/> } </tbody> </table> </body> </html> |
Performance of Partial Tag Helper is equal to Html.PartialAsync and both behave similar.
Differences between Html.PartialAsync (Html.Partial) and Html.RenderPartialAsync (Html.RenderPartial)
- Html.PartialAsync (Html.Partial) have IHtmlContent Result but result of Html.RenderPartialAsync (Html.RenderPartial) are void.
- Html.PartialAsync (Html.Partial) return the result to main View but Html.RenderPartialAsync (Html.RenderPartial) present the result to final response as an HTML.
- In theory, performance of Html.RenderPartialAsync (Html.RenderPartial) are better than Html.PartialAsync (Html.Partial)
- Html.PartialAsync (Html.Partial) should have S@ prefix and no need to be ended with semicolon “;“, but Html.RenderPartialAsync (Html.RenderPartial) should be encapsulate with C# code block and terminated with semicolon “;“
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.
You can download this Session Slides form HERE