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

asp net core

HTML Helpers

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

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

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

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

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

Tag Helpers

یکی از مشکلاتی که 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 ها نیاز به ویرایش پیدا می کنند.

Image Tag Helpers

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

disable cache in chrome

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

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

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

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

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

image tag helper

Environment Tag Helpers

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

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

environment include

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

environment staging

توضیح integrity :

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

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

تفاوت بین Include و Exclude

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

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

Form Tag Helper

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

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

  • ابتدا اکشن مورد نظر را به کنترلر افزود. به عنوان مثال اکشن Create به کنترلر Student
  • سپس باید View متناظر با اکشن نوشته شده را ایجاد کرد.
  • و به عنوان نمونه کدهای زیر را در View نوشت.
  • و به عنوان آخرین قدم، افزودن دکمه ی Submit به داخل فرم
create button

نوشته شده توسط mrbitmap علیرضا علی رمضانی

مقالات مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
برای ادامه، شما باید با قوانین موافقت کنید

جدیدترین مقالات

فهرست