tag helper در Asp.net core چیست ؟

پاسخ هوش مصنوعی

Tag Helpers در ASP.NET Core، ابزاری هستند که به شما امکان می دهند تا رفتار HTML را به راحتی و به شکل قابل فهم تری مدیریت کنید. با استفاده از Tag Helpers، می توانید کد HTML خود را تغییر دهید یا عملیات پیچیده تری را با استفاده از Razor Syntax انجام دهید.

Tag Helpers عمدتاً برای بهبود قابلیت نگهداری و خوانایی کد HTML در صفحات Razor استفاده می شوند و به توسعه دهندگان این امکان را می دهند که با ایجاد عناصر دینامیک HTML به طور موثرتری کار کنند.

برخی از سناریوهایی که می توانید از Tag Helpers استفاده کنید شامل:

• ساده سازی فرایند ایجاد فرم ها و کنترل ها
• مدیریت و پیاده سازی لینک های دینامیک
• علامت گذاری عناصر و کنترل ها برای جمع آوری داده ها از کاربر
• افزودن ویژگی های خاص به عناصر HTML به راحتی

نمونه ای از استفاده از یک Tag Helper برای ایجاد یک دکمه لینک:

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

در این مثال، Tag Helper `asp-controller` و `asp-action` به شما این امکان را می دهد که به راحتی یک لینک به اکشن مشخصی یکی از کنترلرها ایجاد کنید بی آنکه به صورت دستی URL ها را مدیریت کنید.

Tag Helper چیست ؟

Tag Helper ها یکی از ویژگی های جدید در Asp.net Core هستند که شما توسط اون میتونید عناصر Html رو ایجاد کنید و هر قابلیتی که توسط دستورات Html قابل انجام هست توسط Tag Helper ها هم قابل انجام هست. در واقع Tag Helper ها عناصر Server-Side هستن ولی المنتهای Client-Side رو ایجاد میکنن. یعنی شما دستورات C# می نویسید ولی موقع اجرا به عناصر Html تبدیل میشن. این امر توانایی های بسیار زیادی رو به شما میده.

برای استفاده از تگ هلپرها باید در بالای View خودتون دستور زیر رو اضافه کنید. در این صورت این قابلیت به سند cshtml شما اضافه میشه.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

اجازه بدید چند تا مثال ساده از تگ هلپر رو ببینیم چون خیلی فهمیدن اونها رو راحت تر میکنه.

//Html
<a href='/Home/Send?id=2' class='myClass'>Click me...</a>

//Tag Helper
<a asp-Controller='Home' asp-Action='Send' asp-route-id='2' class='myClass'>Click me...</a>

در مثال بالا در ابتدا یک تگ a رو با استفاده از دستور Html ساده نوشتیم و در ادامه با استفاده از Tag Helper اون رو بازنویسی کردیم. همانطوری که می بینید برای استفاده از Class ها یا Style ها هیچ تفاوتی در استفاده از Tag Helper ها ایجاد نشده.

لیست مهم ترین Tag Helper ها 

برخی از تگ هلپرهای مهم و پر استفاده در ادامه گفته شده است.

• asp-Controller : از این تگ هلپر برای هدایت کاربر به سمت کنترلر مورد نظر بعد از کلیک روی لینک استفاده می شود. معمولا در تگ های a , button  و ... استفاده می شود.
• asp-action : از این تگ هلپر برای هدایت کاربر به سمت اکشن مورد نظر بعد از کلیک روی لینک استفاده می شود. معمولا در تگ های a , button  و ... استفاده می شود.
• asp-route : از این تگ هلپر برای ارسال پارامتر به سمت سرور استفاده می شود. فرض کنید در یک تگ a میخواهید یک پارامتر به نام firstname را هم ارسال کنید. همانطور که در مثال مشاهده می کنید نام متغیر بعد از کلمه asp-route قرار می گیرد.

<a asp-Controller='Home' asp-action='Send' asp-route-firstname='Ali'>Click me</a>

• asp-for : از این تگ هلپر برای بایند کردن input ها به فیلدهای دیتابیس استفاده می شود. به عنوان مثال فرض کنید در یک input قرار است نام کاربر گرفته شود و در دیتابیس در فیلدی به نام FirstName ذخیره شود. 

<input asp-for='FirstName' Class='form-group' />

//it is equal to
<!--<input id='FirstName' name='FirstName' Class='form-group' />-->

همانطور که در مثال بالا مشخص شده است بعد از اجرا id و name کنترل دقیقا با نام فیلد یکسان می شود.

• asp-validation-for : از این تگ هلپر برای نمایش خطاها یا همان ولیدیشن ها استفاده می شود. فرض کنید در فیلد نام کاربر اگر مقدار خالی باشد باید پیام مناسب نمایش داده شود.

[Display(Name='نام کاربر')]
[Required(ErrorMessage='لطفا نام را وارد کنید')]
public string FirstName {get; set;}

در صورتی که فیلد بالا خالی باشد باید پیغام "لطفا نام را وارد کنید" را نمایش دهد. برای نمایش این پیغام در cshtml به صورت زیر عمل می کنیم.

<div>
   <input asp-for='FirstName' Class='form-group' />
   <span asp-validation-for='FirstName' ></span>
</div>

سایر کاربردهای تگ هلپرها

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

@foreach (var item in Model)
{
    <tr>
          @if (item.flag == true)
          {
            <td>تایید شد</td>
          }
          else
          {
            <td>رد شد</td>
          }
    </tr>                          
}

همانطوری که در مثال بالا می بینید می توانیم به راحتی با استفاده از کلمه @ از تگ هلپرها و دستورات سی شارپ در بین کدهای Html استفاده کنیم. البته دستور بالا رو میتونیم خیلی ساده تر از این هم بنویسیم.

@foreach (var item in Model)
{
    <tr>
          @(item.flag == true ? 'رد شد' : 'تایید شد') 
    </tr>                          
}

مزایای استفاده از Tag Helper ها در Asp.net Core

استفاده از تگ هلپر ها علاوه بر اینکه کدهای شما را خواناتر و ساده تر میکند کنترل بسیار خوبی را بر کدهای Html و css برای برنامه نویس به ارمغان می آورد. در واقع به راحتی شما با استفاده از کدهای سی شارپ می توانید شرط گذاشته و طبق شرطهای مختلف کدهای Html را اجرا کنید.

Tag Helper in Asp.net Core