Tag Helper Components یکی از ویژگیهای جدید ASP.NET Core 2.0 است و هدف آن میسر ساختن ایجاد و یا ویرایش المانهای HTML ایی در حال رندر در صفحه هستند. برای مثال یکی از کاربردهای آنها میتواند افزودن اسکریپتی به صورت پویا به تمام صفحات سایت باشد؛ مانند روش مایکروسافت برای افزودن Application Insights به برنامههای ASP.NET Core. در این حالت متد UserApplicationInsights یک tag helper component را به سیستم تزریق وابستگیها اضافه میکند که کار آن افزودن اسکریپتهای Application Insights به برنامه است؛ بدون اینکه نیازی باشد تا صفحات برنامه را جهت درج این اسکریپتها ویرایش کرد یا تغییر داد.
یک مثال: تهیهی یک TagHelperComponent جهت ویرایش تگهای article
در اینجا کار با ارث بری از کلاس پایه TagHelperComponent شروع میشود. عملکرد آن این است که اگر موتور Razor به پردازش تگ article رسید:
آنگاه اسکریپتی را که ملاحظه میکنید در این بین درج کند.
در ادامه برای اینکه سیستم را از وجود این TagHelperComponent مطلع کنیم، باید آنرا به صورت یک سرویس جدید، به فایل آغازین برنامه معرفی کنیم:
این نوع کامپوننتها تمام تگهای مشخص article موجود در صفحه را هدف قرار میدهند. اما ... اگر آنرا اجرا کنید اتفاقی خاصی رخ نخواهد داد!
نکتهی مهم TagHelperComponentها این است که در قسمت بررسی تگ در حال پردازش:
اگر این تگ ویژه که در اینجا برای مثال article نام دارد، پیشتر تحت عنوان یک TagHelperComponentTagHelper ثبت شده باشد، آنگاه قابلیت اجرا و تحت تاثیر قراردادن این تگ را خواهد یافت. به همین جهت باید این تگ را به عنوان HtmlTargetElement به صورت ذیل تعریف کرد:
سپس آنرا به فایل Views\_ViewImports.cshtml به نحو زیر اضافه نمود:
در اینجا TestTagHelperComponent2 نام اسمبلی جاری است که حاوی ArticleTagHelperComponentTagHelper میباشد.
پس از این تنظیمات است که اگر برنامه را اجرا کنید، این تغییر را (درج اسکریپت در بین تگ article) ملاحظه خواهید کرد:
Tag Helper Components توکار ASP.NET Core 2.0
در حال حاضر دو TagHelperComponent به نامهای HeadTagHelper و BodyTagHelper به صورت پیش فرض به سیستم اضافه شدهاند. یعنی تگهای head و body در ASP.NET Core 2.0 را میتوان توسط TagHelperComponent تحت تاثیر قرار داد و نیازی به تنظیمات TagHelperComponentTagHelper اضافهی فوق برای آنها وجود ندارد.
یک مثال:
در اینجا چون تگ ویژهی head پیشتر در سیستم ثبت شدهاست، مقایسهی انجام شده معتبر بوده و برای فعالسازی آن تنها کاری را که باید انجام داد، ثبت سرویس آن است (البته به شرطی که Microsoft.AspNetCore.Mvc.TagHelpers در فایل Views\_ViewImports.cshtml پیشتر تعریف شده باشد):
اینکار سبب درج اسکریپتی پیش از بسته شدن تگ head صفحه میشود:
یک مثال: تهیهی یک TagHelperComponent جهت ویرایش تگهای article
using System; using System.ComponentModel; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc.Razor.TagHelpers; using Microsoft.AspNetCore.Razor.TagHelpers; using Microsoft.Extensions.Logging; namespace TestTagHelperComponent2.Utils { public class ArticleTagHelperComponent : TagHelperComponent { public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase)) { output.PostContent.AppendHtml("<script>console.log('Running ArticleTagHelperComponent');</script>"); } return Task.CompletedTask; } } }
<article> For Testing the TagHelperComponent. </article>
در ادامه برای اینکه سیستم را از وجود این TagHelperComponent مطلع کنیم، باید آنرا به صورت یک سرویس جدید، به فایل آغازین برنامه معرفی کنیم:
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, ArticleTagHelperComponent>(); services.AddMvc(); }
نکتهی مهم TagHelperComponentها این است که در قسمت بررسی تگ در حال پردازش:
if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase))
using System; using System.ComponentModel; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc.Razor.TagHelpers; using Microsoft.AspNetCore.Razor.TagHelpers; using Microsoft.Extensions.Logging; namespace TestTagHelperComponent2.Utils { [HtmlTargetElement("article")] [EditorBrowsable(EditorBrowsableState.Never)] public class ArticleTagHelperComponentTagHelper : TagHelperComponentTagHelper { public ArticleTagHelperComponentTagHelper( ITagHelperComponentManager componentManager, ILoggerFactory loggerFactory) : base(componentManager, loggerFactory) { } } }
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, TestTagHelperComponent2
پس از این تنظیمات است که اگر برنامه را اجرا کنید، این تغییر را (درج اسکریپت در بین تگ article) ملاحظه خواهید کرد:
Tag Helper Components توکار ASP.NET Core 2.0
در حال حاضر دو TagHelperComponent به نامهای HeadTagHelper و BodyTagHelper به صورت پیش فرض به سیستم اضافه شدهاند. یعنی تگهای head و body در ASP.NET Core 2.0 را میتوان توسط TagHelperComponent تحت تاثیر قرار داد و نیازی به تنظیمات TagHelperComponentTagHelper اضافهی فوق برای آنها وجود ندارد.
یک مثال:
public class MyHeadTagHelperComponent : TagHelperComponent { public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { if (string.Equals(context.TagName, "head", StringComparison.OrdinalIgnoreCase)) { output.PostContent.AppendHtml("<script>console.log('head tag');</script>"); } return Task.CompletedTask; } }
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, MyHeadTagHelperComponent>(); services.AddTransient<ITagHelperComponent, ArticleTagHelperComponent>(); services.AddMvc(); }