چرا Tag Helper؟ (یک مقدمه کوتاه اما حیاتی)

قبل از اینکه سراغ لیست برویم، بیایید صادق باشیم: نوشتن کدهایی مثل @Html.TextBoxFor(m => m.Name) همیشه کمی آزاردهنده بود؛ چون اینتلیسنس (IntelliSense) درستی نداشت و ساختار HTML را به هم می‌ریخت.

تگ هلپرها این مشکل را حل کردند. آن‌ها:

• خوانایی را بالا می‌برند: کد شما شبیه HTML خالص به نظر می‌رسد.

• IntelliSense عالی دارند: ویژوال استودیو دقیقاً می‌داند شما به کدام Property مدل اشاره می‌کنید.

• توسعه فرانت‌اند را راحت می‌کنند: طراح فرانت‌اند شما دیگر با دیدن کدهای عجیب غریب سی‌شارپ در فایل .cshtml وحشت‌زده نمی‌شود.

تگ هلپرهای فرم (The Form Powerhouse)

فرم‌ها قلب تپنده اکثر برنامه‌های وب هستند. تگ هلپرهای فرم مدیریت ارسال داده و امنیت (مثل CSRF Token) را به صورت خودکار انجام می‌دهند.

الف) Form Tag Helper

به جای مشخص کردن دستی action و method به سبک قدیمی، از ویژگی‌های asp- استفاده می‌کنیم.

نکته فنی: وقتی از method="post" استفاده می‌کنید، ASP.NET Core به صورت خودکار یک Antiforgery Token مخفی در فرم تزریق می‌کند تا از حملات XSRF جلوگیری کند. عالی نیست؟

ب) Input Tag Helper

این پرکاربردترین تگ هلپر است. ویژگی asp-for مستقیماً به مدل شما متصل می‌شود.

// Model
public class UserViewModel {
    public string Email { get; set; }
}

چه اتفاقی می‌افتد؟ این تگ به صورت خودکار id و name و حتی type مناسب (مثلاً type="email") را بر اساس نوع داده‌ای مدل شما تولید می‌کند.

تگ هلپرهای اعتبارسنجی (Validation Helpers)

کاربران همیشه داده‌های درست وارد نمی‌کنند. برای نمایش خطاها، دو تگ هلپر حیاتی داریم:

• asp-validation-for: برای نمایش خطای مربوط به یک فیلد خاص.

• asp-validation-summary: برای نمایش لیست تمام خطاهای فرم در یک بخش.

مثال:

تگ هلپر Anchor (لینک‌سازی هوشمند)

دیگر لازم نیست نگران تغییر آدرس‌های URL در طول پروژه باشید. asp-controller و asp-action لینک را برای شما می‌سازند.

    مشاهده محصول

ویژگی طلایی: asp-route-{value} به شما اجازه می‌دهد هر پارامتری که در Route تعریف شده (مثل Id یا Slug) را به راحتی به URL اضافه کنید.

تگ هلپر تصویر (Image Tag Helper)

یکی از بزرگترین چالش‌های وب، کش شدن (Caching) تصاویر قدیمی است. وقتی تصویر جدیدی جایگزین می‌کنید، مرورگر کاربر ممکن است همچنان نسخه قدیمی را نشان دهد.

با استفاده از asp-append-version="true"، یک هش (Hash) منحصر‌به‌فرد به انتهای آدرس عکس اضافه می‌شود (مثلاً ?v=K8...). اگر فایل عکس تغییر کند، این هش هم عوض می‌شود و مرورگر مجبور به دانلود نسخه جدید می‌گردد. به همین سادگی!

تگ هلپر محیط (Environment Tag Helper)

گاهی نیاز دارید در محیط "توسعه" (Development) از فایل‌های CSS اصلی استفاده کنید، اما در محیط "انتشار" (Production) از نسخه‌های Minified شده.

این تگ بر اساس متغیر محیطی ASPNETCORE_ENVIRONMENT تصمیم می‌گیرد کدام بخش را رندر کند.

تگ هلپرهای Link و Script (مدیریت بهینه فایل‌ها)

این تگ‌ها قابلیت‌های فوق‌العاده‌ای برای بارگذاری فایل‌ها از CDN دارند. اگر CDN در دسترس نباشد، این تگ‌ها می‌توانند به صورت خودکار به فایل محلی سوئیچ کنند (Fallback).

در اینجا، اگر window.jQuery لود نشود، سیستم می‌فهمد که CDN مشکل دارد و فایل محلی را لود می‌کند.

تگ هلپر کش (Cache Tag Helper)

برای بهبود عملکرد صفحات سنگین، می‌توانید بخشی از Razor را کش کنید.

    @await Component.InvokeAsync("TopProducts")

این تکه کد، خروجی کامپوننت را به مدت ۱۰ دقیقه در حافظه نگه می‌دارد و در درخواست‌های بعدی دوباره پردازش نمی‌شود.

تگ هلپر Partial و Component

برای قطعه‌بندی صفحه و استفاده مجدد از کدها:

• Partial: برای فراخوانی فایل‌های .cshtml کوچک.

• Component: برای فراخوانی View Componentها.

یک نکته حیاتی: فعال‌سازی Tag Helperها

اگر تگ هلپرهای شما کار نمی‌کنند و در ویرایشگر رنگی نمی‌شوند، احتمالاً فراموش کرده‌اید آن‌ها را در فایل _ViewImports.cshtml تعریف کنید. حتماً خط زیر را در آن فایل داشته باشید:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

جمع‌بندی و مقایسه در یک نگاه

تگ هلپرها فقط یک ابزار ساده نیستند؛ آن‌ها استاندارد جدید توسعه وب در اکوسیستم دات‌نت هستند. با استفاده درست از این تگ‌ها، کدهای شما تمیزتر، امن‌تر و با قابلیت نگهداری بالاتر خواهد بود.