Tag Helper یکی از ویژگیهای جدید در Asp.net Core MVC می باشد.در این آموزش شما میتوانید با استفاده از کلاسهای C# قالب عناصر html را بصورت دلخواه خصوصی سازی نمایید.
برای شروع پس از ایجاد پروژه با نام TagSampleو ایجاد یک کنترلر و اکشن و ویو، درون ویوی موزد نظر از یک دکمه بصورت زیر استفاده کنید.
<button type="submit" >Add</button>
در این آموزش از فایلهای bootstrap استفاده شده است لذا فایل مورد نظر را به برنامه اضافه نمایید.
ایجاد کلاس TagHelper
کلاس مورد نظز را در هر قسمت از پروژه میتوانید اضافه نمایید ما در این آموزش کلاس مورد نظر را به صورت زیر درون پوشه Infrastructure/TagHelpers قرار می دهیم.
[HtmlTargetElement("button", Attributes = "bs-button-color", ParentTag = "form")]
public class ButtonTagHelper : TagHelper
{
public string BsButtonColor { get; set; }
public override void Process(TagHelperContext context,
TagHelperOutput output)
{
output.Attributes.SetAttribute("class", $"btn btn-{BsButtonColor}");
}
}
کلاس TagHelper دارای متدی به نام Process می باشد که جهت انجام و انتقال خاصیت عناصر html انرا پیاده سازی می کنیم.
نام کلاس مورد نظر هم نام با عنصر html مورد نظر انتخاب شده است. و جهت ایجاد محدودیت بر روی عناصر html از ویژگی HtmlTargetElement بالای کلاس مورد نظر استفاده میکنیم. چرا که در غیر اینصورت button هایی که از ویزگیهای دیگر bootstrap استفاده کنند دچار مشکل خواهند شد.
ویژگی ParentTag باعث میشود از این کلاس فقط درون تگ فرم استفاده شود.
در پایان جهت استفاده از کلاس فوق ابتدا فضای نام آنرا درون کلاس viewimport بصورت زیر درج میکنیم.
@addTagHelper TagSamples.Infrastructure.TagHelpers.*, TagSamples
سپس button مورد نظر را بصورت زیر ویرایش نمایید.
<button type="submit" bs-button-color="danger">Add</button>