آموزش TAG Helper در ASP.NET CORE

در قسمت قبلی دوره ASP.NET CORE در خصوص Html Helper ها صحبت کردیم. از مشکلات که Html Helper ها  این بود که فرانت کار با C# آشنایی نداشتند و باید زمانی را صرف یادگیری Html Helper ها میکردند. از این رو شرکت مایکروسافت ابزار جدیدی به نام TAG Helper ها را معرفی کرد. که دقیقا کار Html Helper ها را انجام میدهد ولی درک آن بسیار ساده تر است. در ادامه با آموزش TAG Helper با ما همراه باشید.

TAG Helper چیست؟

TAG Helper در ASP.NET Core ابزاری هستند که به شما کمک می‌کنند تا کدهای HTML خود را با استفاده از دستورات C# به صورت داینامیک و قوی‌تر تولید کنید. و به شما اجازه می‌دهند تا از امکانات قدرتمند زبان C# برای تولید کدهای HTML استفاده کنید، به طوری که کدهای HTML شما تمیزتر و خواناتر باشند.

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

TAG Helper ها توسعه HTML را به صورت کاربرپسند ارائه می دهد و مانند HTML استاندارد به نظر می رسند. طراحان front-end که با فریم روک و کتابخانه های JavaScript و CSS و غیره کار میکنند میتوانند به آسانی View را بدون دانستن زبان #C تغییر و یا بروزرسانی نمایند.

ویژگی‌ها و مزایای TAG Helper

• سازگاری با HTML استاندارد: TAG Helper ها به صورت مستقیم با HTML استاندارد سازگار هستند و می‌توانند به عنوان Attribute های HTML استفاده شوند.
• قابلیت استفاده مجدد: می‌توانید TAG Helper های خود را تعریف کنید و در بخش‌های مختلف برنامه از آنها استفاده کنید.
• کد تمیزتر: به جای اینکه منطق رندرینگ HTML را در View ها بنویسید، می‌توانید از TAG Helper ها برای جدا کردن این منطق استفاده کنید، که منجر به کد تمیزتر و سازماندهی بهتری می‌شود.
• کامپایل شدن به HTML: در نهایت، کدهای TAG Helper به HTML خالص کامپایل می‌شوند، بنابراین هیچ عملکردی را قربانی نمی‌کنید.

انواع TAG Helper

• فرم
• لینک
• روت
• سایر

لیست تمام TAG Helper ها

در ASP.NET Core، تعدادی Tag Helper از پیش تعریف شده وجود دارد که برای کار با فرم‌ها، لینک‌ها، نمایش اعتبارسنجی، و بسیاری موارد دیگر طراحی شده‌اند. این Tag Helper ها به شما اجازه می‌دهند که کد HTML را به صورت داینامیک و با استفاده از کدهای C# مدیریت کنید. در ادامه، لیست Tag Helper های پیش‌فرض که در ASP.NET Core موجود هستند، آورده شده است:

تگ هلپر های فرم

• هلپر فرم – FormTagHelper

<form asp-controller="Home" asp-action="Index">
    <!-- فیلدهای فرم -->
</form>

• هلپر تکست باکس – InputTagHelper

<input asp-for="UserName" />

• هلپر تکست اریا – TextAreaTagHelper

<textarea asp-for="UserDescription"></textarea>

• هلپر لیبل – LabelTagHelper

<label asp-for="UserName"></label>

• هلپر سلکت – SelectTagHelper

<select asp-for="UserRole" asp-items="Model.Roles"></select>

• هلپر سلکت – OptionTagHelper

<select asp-for="UserRole">
    <option value="Admin">Admin</option>
    <option value="User">User</option>
</select>

• هلپر دکمه – ButtonTagHelper

<button asp-controller="Home" asp-action="Index">Go to Home</button>

• هلپر اعتبارسنجی – ValidationMessageTagHelper

برای نمایش پیام‌های اعتبارسنجی برای یک فیلد در تگ Span استفاده میشود.

<span asp-validation-for="UserName"></span>

• هلپر اعتبارسنجی – ValidationSummaryTagHelper

برای نمایش خلاصه پیام‌های اعتبارسنجی در تگ های Div و یا UL استفاده میشود.

<div asp-validation-summary="All"></div>

هلپر های لینک

• هلپر لینک‌ – AnchorTagHelper

<a asp-controller="Home" asp-action="About">About</a>

• هلپر لینک‌های استایل – LinkTagHelper

<link href="~/css/site.css" rel="stylesheet" />

هلپر های نمایش داده‌ها

• هلپر رندر کردن پارشیال ویو  – PartialTagHelper

<partial name="_LoginPartial" />

• هلپر رندر کردن کدهای خاص براساس محیط اجرا – EnvironmentTagHelper

<environment include="Development">
    <script src="~/js/dev-only.js"></script>
</environment>

• هلپر کش کردن – CacheTagHelper

<cache expires-after="@TimeSpan.FromSeconds(10)">
    <p>Cached content at @DateTime.Now</p>
</cache>

• هلپر کش کردن بخش‌هایی از صفحه با استفاده از کش توزیع شده – DistributedCacheTagHelper

<distributed-cache expires-after="@TimeSpan.FromSeconds(10)">
    <p>Distributed cached content at @DateTime.Now</p>
</distributed-cache>

• هلپر اسکریپت‌ – ScriptTagHelper

<script src="~/js/site.js" asp-append-version="true"></script>

• هلپر استایل‌ – StyleTagHelper

<style asp-append-version="true">
    @import url('~/css/site.css');
</style>

تگ هلپر مسیرها روت

• هلپر مسیر – RouteTagHelper

<a asp-route-id="1" asp-route-name="HomeRoute">Home</a>

تگ هلپر های دیگر

• هلپر تصویر – ImageTagHelper

<img src="~/images/logo.png" asp-append-version="true" />

• هلپر هد – HeadTagHelper

<head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>

• هلپر بادی – BodyTagHelper

<body>
    <h1>Welcome to My App</h1>
</body>