آموزش کار با Partial View در ASP.NET CORE

PartialViewها یک نوع خاص از Viewها هستند که برای جداسازی و سازماندهی بهتر کد و نمایش بخش‌های تکراری یا قابل استفاده مجدد از UI استفاده می‌شوند. PartialViewها به شما این امکان را می‌دهند که بخش‌هایی از صفحات وب را جداگانه تعریف کرده و در صفحات مختلف استفاده کنید، بدون اینکه نیاز باشد کد تکراری بنویسید. در ادامه به آموزش کار با Partial View ها می‌پردازیم.

Partial View چیست؟

Partial View یک فایل .cshtml است که درون فولدر View در MVC یا Pages در Razor Pages قرار دارد. در ASP.NET Core MVC ، View Result یک کنترلر هم می تواند View و هم Partial View را بازگرداند(Return کند). در Razor Pages نیز یک PageModel می تواند Partial View را به عنوان PartialViewResult برگرداند. نام فایل های Partial View معمولا با پیشوند(_) شروع می شوند برای مثال: _Header.cshtml، _Footer.cshtml. این مدل نامگذاری اجباری نیست، اما تفاوت Partial View ها را از View های اصلی مشخص می کند.

مزایای استفاده از PartialView

• افزایش قابلیت استفاده مجدد: با استفاده از PartialViewها می‌توانید بخش‌های تکراری UI را به صورت مجزا تعریف کرده و در چندین View استفاده کنید.
• کاهش پیچیدگی: با جداسازی بخش‌های مختلف UI به فایل‌های جداگانه، کد تمیزتر و قابل فهم‌تر می‌شود. ا
• فزایش قابلیت نگهداری: تغییرات در PartialViewها تنها در یک مکان انجام می‌شود و نیازی به اعمال تغییرات در تمام Viewهایی که از آن استفاده می‌کنند نیست.

بهترین مکان برای ایجاد پارشیال ویو کجاست؟

بهترین پوشه برای ایجاد PartialViewها در ASP.NET Core معمولاً پوشه Views/Shared است. این پوشه به طور پیش‌فرض برای نگهداری Viewها و PartialViewهایی استفاده می‌شود که ممکن است در چندین Controller و View مختلف مورد استفاده قرار بگیرند. با این کار، می‌توانید به راحتی PartialViewها را در سراسر پروژه خود به اشتراک بگذارید و دسترسی داشته باشید.

همچنین ایجاد یک پوشه مخصوص برای PartialViewها در داخل پوشه Views/Shared می‌تواند به سازماندهی بهتر پروژه کمک کند و دسترسی و مدیریت PartialViewها را ساده‌تر نماید.

بهترین مکان برای ایجاد پارشیال ویو

نکته : اگر PartialViewها تنها در یک Controller یا View خاص استفاده می‌شوند، می‌توانید آن‌ها را در پوشه مرتبط با همان Controller قرار دهید. برای مثال، PartialViewهایی که فقط در HomeController استفاده می‌شوند را می‌توانید در Views/Home قرار دهید.

نحوه ایجاد Partial View

• ابتدا در فولدر Views/Shared یک فولدر جدید به نام Partials ایجاد کنید.
• روی پوشه Partials کلیک راست کرده و از گزینه View را انتخاب کنید.
• در پنجره باز شده گزینه Razor View را انتخاب و روی دکمه Add کلیک کنید.

آموزش ابجاد Partial View

در پنحره جدید تیک Create As Partial View را بزنید. در نام گذاری توجه داشته باشید که با _ شروع شود و در آخر آن عبارت Partial اضافه شود.

Create As Partial View

فراخوانی و نمایش Partial View در View

• فراخوانی و نمایش HtmlHelper

@Html.Partial("Partials/_UserListPartial")

@{
    await Html.RenderPartialAsync("Partials/_UserListPartial");
}

تفاوت‌های بین Partial و RenderPartial

در رندر کردن محتوا Partial نتیجه را به عنوان یک رشته HTML برمی‌گرداند و سپس آن را در صفحه اصلی درج می‌کند. RenderPartial مستقیماً خروجی را در جریان پاسخ می‌نویسد.

در عملکرد Partial ممکن است از حافظه بیشتری استفاده کند، زیرا نتیجه را به عنوان یک رشته HTML نگه می‌دارد. ولی RenderPartial می‌تواند کارایی بهتری داشته باشد، به ویژه در صورت استفاده از PartialViewهای بزرگ، زیرا خروجی را مستقیماً در جریان پاسخ می‌نویسد.

• فراخوانی و نمایش TagHelper

<partial name="Partials/_UserListPartial" />

مقدار دهی و ارسال داده به Partial View

ارسال مدل به PartialView با Tag Helper

@{
    var model = new Blog { Id = 1, Url = "Url", Title = "Title", Description = "Description" };
}
<partial name="Partials/_TestPartial" model="model" />

ارسال مدل به PartialView با Html Helper توجه داشته باشید که در این روش باید آدرس دهی کامل باشد.

@{
    await Html.RenderPartialAsync("~/Views/Shared/Partials/_TestPartial.cshtml", new Blog { Id = 1, Url = "Url", Title = "Title", Description = "Description" });
}

دریافت و نمایش مدل در Partial View

@model CreatePartialView.Models.Blog
<h1>My Partial View</h1>
<h4>@Model.Id</h4>
<h4>@Model.Url</h4>
<h4>@Model.Title</h4>
<h4>@Model.Description</h4>

ارسال ViewData به PartialView

@{
    ViewData["Message"] = "My Message";
}
<partial name="Partials/_TestPartial" />

دریافت ViewData در PartialView

<h4>@ViewData["Message"]</h4>

اگر PartialView ای که میخواهید ایجاد کنید. دارای منطق پیچیده‌ای بود، باید از ViewComponentها استفاده کنید. که قابلیت‌های بیشتری برای مدیریت منطق و نمایش فراهم می‌کنند. کلا اگر نیاز به دریافت دیتا از دیتابیس بودید به سراغ ViewComponent ها بروید.