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

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