معرفی Tag Helpers در ASP.NET Core

برای ایجاد کردن عناصر html در هنگام اجرا استفاده می شوند. زبان آنها #C است و روش کار بده این گونه است که با نوشتن کد های Server-side  در داخل فایل HTML می توان اجزاء HTML که Client-Side هستند را ایجاد کرد. دو نوع از پرکاربرد ترین آنها عبارت اند از:

• استفاده از html.ActionLink برای ایجاد یک anchorButton

که در این مورد دقیقا معادل کد زیر است:

یکی از معایب آن این است که امکان استفاده از استایل در آن وجود ندارد. چون خودش anchorButton را می سازد. می توان از چیزی استفاده کرد که به جای رندر یک دکمه، فقط string مسیر را بدهد. مانند:Url.Action تا بعدا بتوان در هر جایی از آن استفاده کرد.

• استفاده از Url.Actionبرای بدست آوردن مسیر مورد نیاز برای anchorButton

یکی از مشکلاتی که HTML Helper ها داشتند عدم وجود IntelliSense در Visual Studio برای آنها بود. چون نام کنترلر ها و اکشن ها در قالب String استفاده می شد. به همین دلیل Tag Helpers ها بوجود آمدند. البته آنها هم برای رندر کردن تگ های html در هنگام اجرا استفاده می شوند و مشابه HTML Helper ها هستند، اما از IntelliSense برخوردارند و اگر نام کنترلر یا اکشن اشتباه وارد شود، هشدار می دهند. برای مثال فرض کنید که میخواهیم در ویو student با فشردن دکمه ی مشاهده وارد ویو details شویم. می توانیم به صورت دستی اینگونه بنویسیم:

همچنین می توانیم از Tag Helpers استفاده کنیم که مزایای بسیاری دارند. برای استفاده از Tag Helper ها باید ابتدا در فایل ViewImport کد زیر را اضافه کنیم:

استفاده از Tag Helper در View به شکل زیر است:

مزیت استفاده از Tag Helpers ها این است که با تغییر تنظیمات مربوط به route و یا تغییر نام کنترلر، باز هم کد به درستی کار می کند. در صورتی که HTML Helpers ها نیاز به ویرایش پیدا می کنند.

در حالت معمول با استفاده از تگ img می توان از تصاویر استفاده کرد. این تصاویر در cache مرورگر ذخیره می شوند. اگر نام تصویر در سرور ثابت بماند اما خود تصویر تغییر پیدا کند مرورگر متوجه تغییر نمی شود و از روی cache خود، تصویر قبلی را نمایش می دهد. اگر خصوصیت cache را در مرورگر غیر فعال کنیم با هر بار لود صفحه، عکس مجددا دانلود می شود.

راه حل این موضوع استفاده از Image Tag Helpers است. روش کار بدین صورت است که یک کد Hash شده به انتهای آدرس تصویر اضافه می کند و تصویر با نام جدید در مرورگر ذخیره می شود. با هر بار تغییر تصویر در سرور، این کد Hash شده که انتهای نام تصویر است مجددا Generate می شود. موقع لود صفحه، مرورگر کد Hash شده ی داخل cache را با کد متقابلش در سرور مقایسه می کند. اگر کد تغییر پیدا کرده بود تصویر دانلود می شود در غیر این صورت از cache مرورگر خوانده می شود.

به عنوان نمونه تصویر زیر تگ معمولی Image در View Source را نشان می دهد که بدون کد hash شده است:

اما  همان تگ Image بعد از استفاده از Image Tag Helper به صورت زیر در می آید:

چگونه می توان از Image Tag Helpers استفاده کرد؟

تنها کافی است که کد زیر به هر تگ img اضافه شود.

برای استفاده از فایل هایی نظیر Bootstrap راه های زیادی وجود دارد. می توانیم آنها را در سرور خودمان کپی و استفاده کنیم و همچنین می توانیم از CDN استفاده کنیم. مزیت این کار این است که با بروزرسانی فایل ها، همیشه جدیدترین نسخه را در اختیار خواهیم داشت. ASP.Net Core شامل Environment های متعددی است نظیر: Development, Staging, Production و … است. برای آشنایی بیشتر با Environment ها اینجا را کلیک کنید.

اگر بخواهیم تنها در حالت Development از bootstrap داخل سرور خود استفاده کرده و در بقیه ی حالت ها از cdn استفاده کنیم از Environment Tag Helpers استفاده می کنیم. کد زیر باعث می شود که وب اپلیکیشن فقط در حالتی که environment در حالت Development باشد از فایل bootstrap استفاده کند.

کد زیر فقط در environment های Staging و Production، محتویات زیر را رندر می کند.

توضیح integrity :

یک کد hash شده (Signature) می باشد که برای حفاظت از محتویات فایل قرار داده شده است. این کد بر اساس محتویات فایل بوت استرپ ایجاد شده و باعث می شود که در صورت تغییر فایل بوت استرپ توسط نرم افزار های مخرب و یا نفوذگر ها، از Load آن جلوگیری شود. اگر مقدار این signature را تغییر دهیم مرورگر فکر می کند که فایل اصلی جایگزین شده و نفوذ اتفاق افتاده است. بنابر این از آن استفاده نمی کند.

برای آشنایی با مفهوم Cross-Origin اینجا را کلیک کنید.

در این مثال فقط در حالتی که environment برابر Development باشد از فایل bootstrap.css موجود در پروژه استفاده می شود و در هر environment ای به غیر از Development از فایل bootstrap موجود در cdn استفاده می شود.

در بعضی مواقع امکان دارد که cdn کلا در دسترس نباشد. در چنین شرایطی مجبور به استفاده از سازوکاری هستیم که بتوانیم از bootstrap داخل سرور خودمان استفاده کنیم (Fallback)

با استفاده از آنها می توان Form هایی پویا ساخت و در آنها مشخص کرد که کنترلر، اکشن و نوع method به چه شکلی باشد.

برای پیاده سازی Form Tag Helper باید :

• ابتدا اکشن مورد نظر را به کنترلر افزود. به عنوان مثال اکشن Create به کنترلر Student
• سپس باید View متناظر با اکشن نوشته شده را ایجاد کرد.
• و به عنوان نمونه کدهای زیر را در View نوشت.

• و به عنوان آخرین قدم، افزودن دکمه ی Submit به داخل فرم