در این جلسه از آموزش ASP.NET Core مبحث Partial View را مورد بررسی قرار خواهیم داد. همچنین روش‌های فراخوانی Partial View در نمای اصلی را مرور خواهیم کرد و تفاوت‌های آنرا را با جزئیات شرح خواهیم داد.
Partial View چیست؟
Partial View در واقع قسمتی از یک نما (View) میباشد که دارای منطقی خاص بوده و قابلیت استفاده در نماهای مختلف را دارد. در نتیجه برای جلوگیری از نوشتن کدهای تکراری، قسمت مورد نظر را در یک Partial View قرار میدهیم و در قسمت‌های مورد نیاز با روش‌هایی که در ادامه شرح خواهیم داد، استفاده خواهیم کرد.
اولویت جستجوی Partial View نیز مانند View میباشد که در جلسه هفده‌ام به شرح آن پرداختیم و در ادامه قابل مشاهده میباشد. همچنین ساختار فایلی و پسوند فایل‌های Partial View همانند نما میباشد (cshtml برای زبان برنامه نویسی سی شارپ و vbhtml برای زبان برنامه نویسی VB).
در نتیجه با توجه به مسیریابی ASP.NET Core برای نمایش Partial View در صورتی که قصد داریم از پارشال ویو خود در نمای دیگر Controllerها استفاده کنیم، بهتر است Partial View خود را در پوشه Shared قرار بدهیم.
ایجاد Partial View
همانگونه که اشاره شد، بهتر است ابتدا درون پوشه Views یک پوشه با نام Shared ایجاد نماییم. سپس درون پوشه ایجاد شده یک نما ایجاد کرده و قطعه کد مورد نظر را درون آن قرار میدهیم.
@model DailyCostWebApplication.Models.Cost
<tr>
<td>@Model.ID</td>
<td>@Model.Amount</td>
<td>@Model.Category</td>
<td>@Model.Comment</td>
</tr>فراخوانی Partial View با HTML Helper
در این آموزش، چهار HTML Helper را برای فراخوانی Partial View معرفی خواهیم کرد. البته استفاده از Html.Partial و Html.RenderPartial به دلیل اجرا در حالت Synchronize و احتمال بروز خطای Deadlock توصیه نمیگردد. ولی هر دوی این متدها دارای ساختار نوشتاری و Overload های یکسانی با حالت‌ها Asynchronous خود میباشند. پس بهتر است در صورت استفاده از HTML Helper از نسخه غیرهمزمان (Asynchronous) استفاده نمایید.
- Html.Partial اجرا در حالت Synchronize
- Html.PartialAsync اجرا در حالت Asynchronous
- Html.RenderPartial اجرا در حالت Synchronize
- Html.RenderPartialAsync اجرا در حالت Asynchronous
توجه داشته باشید در صورت استفاده از متدهای Asynchronous حتما از پیشوند await میبایست استفاده نمود. ضمنا استفاده از @ قبل از استفاده از Html.PartialAsync و Html.Partial الزامی میباشد. علاوه بر این، RenderPartial و RenderPartialAsync میبایست در میان بلاک کدهای سی شارپ در نما نوشته شود. همچنین قبل از این دو متد نباید از @ استفاده نمود و انتهای آن میبایست با سیمیکالن ; بسته شود.
ضمنا متدهای Html.PartialAsync و Html.Partial دارای خروجی از نوع IHtmlContent میباشد که به نمای اصلی برگردانده میشود و در نمای اصلی پردازش میشود. ولی RenderPartial و RenderPartialAsync خروجی به نمای اصلی ندارد و نتیجه نهایی به صورت Html در پاسخ نهایی نمایش داده میشود. در نتیجه از نظر تئوری، عملکرد RenderPartial و RenderPartialAsync از توابع Html.PartialAsync و Html.Partial بهتر میباشد.
@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>در قطعه کد فوق، فراخوانی Partial View با استفاده از متد Html.PartialAsync صورت گرفته است. همچنین در صورت تمایل به فراخوانی با استفاده از متد RenderPartialAsync تنها کافی است خط 22 کد فوق را به شکل زیر تغییر دهید.
await Html.RenderPartialAsync("_CostList_PartialView", cost);فراخوانی Partial View با Tag Helper
برای این منظور، ابتدا باید قابلیت استفاده از Tag Helper را به نمای خود اضافه نماییم.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpersسپس میتوان به جای استفاده از HTML Helper در مثال‌های فوق از Tag Helper استفاده نمود.
<partial name="_CostList_PartialView" model="cost"/>نمای کلی View با استفاده از Tag Helper
@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>
نتیجه استفاده از تگ هلپر Partial از نظر کارایی و عمکلرد مانند استفاده از Html.PartialAsync میباشد.
تفاوت میان Html.PartialAsync (Html.Partial) و Html.RenderPartialAsync (Html.RenderPartial)
- مقدار برگشتی متد PartialAsync از نوع IHTMLContent میباشد ولی RenderPartialAsync مقدار برگشتی ندارد (void) و در خروجی، یک HTML ایجاد میکند.
- در صورت استفاده از PartialAsync، نتیجه به نمای اصلی باز میگردد و در آن پردازش میگردد ولی RenderPartialAsync به صورت مستقیم در پاسخ نهایی نتیجه را به صورت HTML نمایش میدهد.
- از نظر تئوری، با توجه به موارد فوق سرعت پردازشی RenderPartialAsync از PartialAsync بالاتر میباشد
- PartialAsync میبایست با پیشوند @ آغاز گردد و نیازی به بسته شدن با سمیکالن ; نیست ولی RenderPartialAsync میبایست در بلاک کد سی شارپ قرار بگیرد و با سمیکالن ; بسته شود
در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید و لیست کامل جلسات در این قسمت در دسترس شما میباشد.
دانلود اسلایدهای آموزشی این جلسه از اینجا