مقاله آموزشی برنامه نویسی: کاوش عمیق در ابزارهای رابط کاربری ASP.NET Core: تفاوت‌های ViewComponent، PartialView و TagHelper

زبان های برنامه نویسی ASP.NET CORE MVC

کاوش عمیق در ابزارهای رابط کاربری ASP.NET Core: تفاوت‌های ViewComponent، PartialView و TagHelper

58 بازدید 0 نظر ۱۴۰۴/۰۷/۲۷

۱. PartialView (نمای جزئی): بازاستفاده ساده از HTML

PartialView یا نمای جزئی، ساده‌ترین و قدیمی‌ترین مکانیزم برای استفاده مجدد از UI در اکوسیستم ASP.NET (از دوران MVC کلاسیک) است.

تعریف و کارکرد

یک PartialView اساساً یک فایل .cshtml است که حاوی قطعه‌ای از کدهای Razor و HTML می‌باشد. تفاوت اصلی آن با یک View معمولی این است که برای اجرای منطق مستقل طراحی نشده است. PartialView فاقد یک متد اکشن (Action Method) مستقل در کنترلر است و به طور کامل به مدل و داده‌های ویویی که آن را فراخوانی کرده، وابسته است.

PartialView صرفاً یک ابزار "رندر" است. شما قطعه‌ای از HTML را که می‌خواهید در چندین مکان تکرار شود (مانند فوتر، هدر، یا یک فرم خاص) جدا کرده و در یک فایل _MyPartial.cshtml قرار می‌دهIDE.

نحوه فراخوانی

PartialView ها معمولاً با استفاده از متدهای Html Helper در داخل یک View دیگر فراخوانی می‌شوند:

// فراخوانی و انتظار برای اجرای ناهمزمان (روش پیشنهادی)
@await Html.PartialAsync("_HeaderPartial")

// فراخوانی همزمان (در صورت عدم نیاز به عملیات I/O)
@Html.Partial("_FooterPartial")

// فراخوانی و ارسال یک مدل یا بخشی از مدل والد
@await Html.PartialAsync("_ProductDetailsPartial", Model.Product)

ویژگی‌های کلیدی PartialView

وابستگی به مدل والد: به طور پیش‌فرض، به ViewData و مدل (Model) ویوی اصلی دسترسی دارد.
فاقد منطق مستقل: نمی‌تواند به تنهایی داده‌ها را از دیتابیس واکشی کند یا محاسبات پیچیده‌ای انجام دهد. تمام منطق باید قبل از فراخوانی آن در اکشن کنترلر اصلی یا خود ویوی والد انجام شده باشد.
سادگی: پیاده‌سازی و استفاده از آن بسیار آسان است.

موارد استفاده (Use Cases)

بخش‌های ثابت صفحه: مانند هدرها، فوترها، منوهای ناوبری ثابت (که نیازی به واکشی داده از دیتابیس ندارند).
تجزیه ویوهای بزرگ: شکستن یک فایل .cshtml بسیار طولانی و پیچیده به چندین فایل کوچک‌تر و قابل مدیریت‌تر.
فرم‌های تکراری: نمایش یک فرم که در بخش‌های مختلف سایت (مثلاً فرم ورود یا ثبت‌نام) استفاده می‌شود، به شرطی که مدل آن توسط ویوی والد تأمین شود.

نکته کلیدی: از PartialView زمانی استفاده کنید که فقط به استفاده مجدد از نمایش (Display) نیاز دارید و هیچ منطق تجاری یا واکشی داده مستقلی در کار نیست.

۲. ViewComponent (کامپوننت نما): ویجت‌های هوشمند و مستقل

ViewComponent ها یکی از پیشرفت‌های قابل توجه در ASP.NET Core نسبت به MVC 5 هستند. آن‌ها برای پر کردن شکافی طراحی شده‌اند که PartialView ها قادر به پوشش آن نبودند: استفاده مجدد از UI به همراه منطق تجاری مستقل.

تعریف و کارکرد

یک ViewComponent بسیار شبیه به یک "مینی-کنترلر" است. این یک واحد کامل، خودکفا و مستقل است که شامل دو بخش اصلی می‌باشد:

یک کلاس C#: این کلاس از ViewComponent ارث‌بری می‌کند و شامل متدی به نام Invoke یا InvokeAsync است. تمام منطق تجاری، واکشی داده از سرویس‌ها یا دیتابیس، در این متد اتفاق می‌افتد.
یک فایل View (Razor): این فایل .cshtml (معمولاً به نام Default.cshtml)، مسئول رندر کردن خروجی HTML بر اساس داده‌هایی است که توسط متد InvokeAsync به آن پاس داده می‌شود.

نحوه فراخوانی

ViewComponent ها از طریق یک Component Helper در ویو فراخوانی می‌شوند:

// فراخوانی ناهمزمان (روش استاندارد)
@await Component.InvokeAsync("ShoppingCartWidget")

// فراخوانی با ارسال پارامتر
@await Component.InvokeAsync("LatestNews", new { count = 5 })

ویژگی‌های کلیدی ViewComponent

منطق مستقل: قلب تپنده ViewComponent. متد InvokeAsync می‌تواند به سرویس‌ها (از طریق Dependency Injection)، دیتابیس و... دسترسی داشته باشد و داده‌های مورد نیاز خود را مستقل از کنترلر صفحه اصلی واکشی کند.
عدم مشارکت در چرخه Model Binding: ViewComponent ها در فرآیند Model Binding کنترلر والد شرکت نمی‌کنند.
پارامترپذیری: می‌توانند پارامترهایی را به عنوان ورودی دریافت کنند (مانند مثال count = 5 در بالا).
قابلیت تست بالا: از آنجایی که منطق از نمایش جدا شده است (در کلاس C#)، ViewComponent ها به راحتی قابل Unit Test هستند.

موارد استفاده (Use Cases)

ViewComponent ها برای هر بخشی از UI که نیاز به منطق خاص خود دارد، ایده‌آل هستند:

سبد خرید (Shopping Cart): ویجتی که باید تعداد آیتم‌ها و قیمت کل را از دیتابیس بخواند.
منوی ناوبری داینامیک: منویی که دسته‌بندی‌ها را از دیتابیس واکشی می‌کند.
باکس ورود (Login Panel): نمایش نام کاربر در صورت ورود یا فرم ورود در صورت عدم احراز هویت.
لیست "آخرین مقالات" یا "محصولات مرتبط": بخش‌هایی که نیاز به کوئری زدن مستقل به دیتابیس دارند.

نکته کلیدی: از ViewComponent زمانی استفاده کنید که به یک بخش UI قابل استفاده مجدد با منطق تجاری و واکشی داده مستقل نیاز دارید.

۳. TagHelper (یاری‌دهنده تگ): ادغام منطق سرور با HTML

TagHelper ها رویکردی کاملاً متفاوت را در پیش می‌گیرند. آن‌ها به جای جایگزینی یک قطعه کد (مانند PartialView و ViewComponent)، به افزایش قابلیت (Enhance) تگ‌های HTML موجود یا ایجاد تگ‌های سفارشی جدید می‌پردازند.

تعریف و کارکرد

TagHelper ها کلاس‌های C# هستند که به فریم‌ورک اجازه می‌دهند کدهای سمت سرور را مستقیماً در تگ‌های HTML در فایل Razor پردازش کند. هدف آن‌ها ایجاد یک تجربه کدنویسی روان‌تر و شبیه‌تر به HTML استاندارد است، به جای استفاده از سینتکس‌های غریب C# در HTML (مانند @Html.Helpers در MVC قدیم).

TagHelper ها با هدف قرار دادن یک تگ HTML خاص (مانند

یا یک ویژگی (Attribute) خاص (مانند asp-for) فعال می‌شوند.

انواع TagHelper

TagHelper های داخلی (Built-in):

ASP.NET Core مجموعه‌ای غنی از TagHelper های داخلی را ارائه می‌دهد که جایگزین Html Helper های قدیمی شده‌اند:

مثال (به جای @Html.ActionLink):
```
@Html.ActionLink("Edit User", "Edit", "User", new { id = 123 }, null)

Edit User
```
- asp-controller و asp-action (روی تگ ): برای تولید URL های سمت سرور.
  - asp-for: برای اتصال المان فرم به یک پراپرتی در مدل و نمایش Validation Message ها.
  - asp-validation-summary: برای نمایش خطاهای اعتبارسنجی.
  - environment: برای رندر کردن محتوا بر اساس محیط اجرایی (Development, Staging, Production).
TagHelper های سفارشی (Custom):

توسعه‌دهندگان می‌توانند TagHelper های سفارشی خود را بنویسند. برای مثال، می‌توانید یک تگ ایجاد کنید که به طور خودکار آن را به یک لینک mailto: تبدیل کند، یا یک تگ که HTML پیچیده یک کارت پروفایل کاربر را بر اساس یک user-id رندر کند.

ویژگی‌های کلیدی TagHelper

ادغام با HTML: سینتکس آن‌ها طبیعی‌تر و شبیه‌تر به HTML است.
پردازش سمت سرور: اگرچه شبیه HTML به نظر می‌رسند، اما در سمت سرور پردازش شده و به HTML استاندارد تبدیل می‌شوند.
افزایش خوانایی: کد Razor را بسیار تمیزتر و خواناتر می‌کنند.
تمرکز بر المان: به جای رندر کردن یک "بلاک" کامل، روی "المان‌ها" و "ویژگی‌ها"ی HTML تمرکز دارند.

موارد استفاده (Use Cases)

فرم‌ها و اعتبارسنجی: استفاده گسترده از asp-for, asp-validation-for و...
تولید لینک (Routing): استفاده از asp-controller, asp-action, asp-route-*.
رندر شرطی: استفاده از environment تگ هلپر.
ایجاد المان‌های HTML سفارشی: ساختن کامپوننت‌های کوچک و قابل استفاده مجدد که شبیه تگ‌های HTML رفتار می‌کنند (مانند یک تگ ).

نکته کلیدی: از TagHelper زمانی استفاده کنید که می‌خواهید رفتار تگ‌های HTML استاندارد را با منطق سمت سرور تقویت کنید یا سینتکس تولید HTML را ساده‌سازی نمایید.

۴. مقایسه جامع: PartialView در مقابل ViewComponent در مقابل TagHelper

اکنون که هر سه مفهوم را درک کردیم، بیایید آن‌ها را در یک جدول مقایسه کنیم تا تفاوت‌هایشان آشکارتر شود.

ویژگی	PartialView (نمای جزئی)	ViewComponent (کامپوننت نما)	TagHelper (یاری‌دهنده تگ)
هدف اصلی	استفاده مجدد از نمای خالص (UI)	استفاده مجدد از UI + منطق مستقل	افزایش قابلیت تگ‌های HTML
منطق (Logic)	ندارد. (به ویوی والد وابسته است)	دارد. (کلاس C# مستقل با متد InvokeAsync)	دارد. (کلاس C# مستقل با متد ProcessAsync)
واکشی داده	نمی‌تواند. (داده را از والد می‌گیرد)	می‌تواند. (مستقل به دیتابیس/سرویس متصل می‌شود)	می‌تواند. (از طریق Dependency Injection در کلاس خود)
نحوه فراخوانی	@await Html.PartialAsync(...)	@await Component.InvokeAsync(...)	به عنوان تگ () یا ویژگی (asp-for)
واحد تست (Unit Test)	تست آن دشوار است (چون منطق ندارد)	بسیار آسان. (کلاس C# آن به تنهایی قابل تست است)	آسان. (کلاس C# آن قابل تست است)
شکل ظاهری در Razor	یک فراخوانی متد C#	یک فراخوانی متد C#	شبیه به HTML استاندارد
مثال بارز	فوتر ثابت، بخشی از یک فرم	سبد خرید، لیست آخرین اخبار	تگ form ، تگ

کی از کدام استفاده کنیم؟ (خلاصه تصمیم‌گیری)

انتخاب ابزار مناسب، کلید معماری صحیح است:

از PartialView استفاده کنید زمانی که:
- شما فقط می‌خواهید یک فایل .cshtml بزرگ را به قطعات کوچک‌تر بشکنید.
- می‌خواهید یک قطعه HTML ثابت (مانند فوتر) را در چند صفحه تکرار کنید.
- می‌خواهید بخشی از مدلِ ویوی والد را در یک قالب مشخص نمایش دهید و نیاز به هیچ منطق یا واکشی داده جدیدی ندارید.
از ViewComponent استفاده کنید زمانی که:
- شما به یک "ویجت" (Widget) مستقل نیاز دارید.
- بخش UI شما باید منطق تجاری خاص خود را اجرا کند (مانند تماس با دیتابیس یا یک سرویس).
- می‌خواهید این بخش مستقل از کنترلر اصلی صفحه، داده‌های خود را بارگذاری کند (مانند ویجت سبد خرید که در تمام صفحات یکسان عمل می‌کند).
- به قابلیت تست‌پذیری بالای منطق UI خود اهمیت می‌دهید.
از TagHelper استفاده کنید زمانی که:
- می‌خواهید سینتکس کد Razor خود را تمیزتر و شبیه HTML کنید (جایگزینی @Html.Helpers).
- می‌خواهید رفتار تگ‌های HTML موجود را تغییر دهید یا به آن‌ها قابلیت سمت سرور اضافه کنید (مانند asp-action روی تگ ).
  - می‌خواهید یک المان UI تکراری (مانند یک دکمه سفارشی یا یک آلرت باکس) را به شکل یک تگ HTML سفارشی () پیاده‌سازی کنید.

نتیجه‌گیری

PartialView، ViewComponent و TagHelper ابزارهای رقیب نیستند، بلکه ابزارهای مکمل در جعبه‌ابزار توسعه‌دهنده ASP.NET Core محسوب می‌شوند.

PartialView یک ابزار "گنگ" (Dumb) برای رندر کردن UI است.
ViewComponent یک ابزار "هوشمند" (Smart) برای رندر کردن UI به همراه منطق مستقل است.
TagHelper یک ابزار "ظریف" (Elegant) برای ادغام منطق سرور با سینتکس HTML است.

در یک برنامه پیچیده ASP.NET Core، شما به احتمال زیاد از هر سه آن‌ها به صورت همزمان استفاده خواهید کرد:

شما ممکن است یک ViewComponent (مانند سبد خرید) داشته باشید که درون خود از PartialView ها برای سازماندهی نمایش آیتم‌ها استفاده می‌کند، و در عین حال، TagHelper هایی مانند asp-for و asp-action را در سراسر برنامه برای مدیریت فرم‌ها و لینک‌ها به کار می‌برید. درک عمیق تفاوت‌های این سه، به شما کمک می‌کند تا کدهایی تمیزتر، ماژولارتر و با قابلیت نگهداری بالاتر بنویسید.

لینک استاندارد شده: VAuTc2o