Tag Helper ها کاربردی بسیار نزدیک و همانند با Html Helper ها دارند. Html Helper ها بخشی از موتور Razor و بر پایه متدهای سی شارپ هستند که درون فایل های نما برای ساخت تگ های اچ تی ام ال به کار می روند، بدون آنکه نیاز به نوشتن خود تگ های اچ ام ال باشد. در برابر این، Tag Helper ها دیگر متدهای سی شارپ نیستند و برای ساخت خود تگ ها به کار نمی روند، بلکه آنها به گونه ویژگی هایی به درون خود تگ افزوده می شوند. به گفته دیگر می بایست خود تگ ها را دستی بنویسیم و سپس درون آنها Tag Helper را بی افزاییم.

در نوشته ساخت URL با UrlHelper و TagHelper در ASP.NET Core MVC درباره دو Tag Helper به نام های asp-action و asp-controller گفته ایم. در زیر برای هم سنجی (مقایسه) میان Html Helper و Tag Helper دو کد آورده ایم که هر دو نشانی URL برای یک متد کنترل گر از یک کلاس کنترل گر را می سازند. همانگونه که می بنید ورودی های دوم و سوم متد ()ActionLink همسان با عبارت های asp-action و asp-controller هستند.

عبارت asp-for

در کدهای زیر فرم اچ تی ام ال ساخته شده است که نخستین کد با متدهای HtmlHelper و دومی با عبارت های Tag Helper ساخته شده است. عبارت asp-for نام یک ویژگی از کلاس مدل را که بالای فایل نما پیوست شده است را دریافت می کند. بنابراین تگ input از نوع text با متد ()TextForBox برای ویژگی به نام Name ساخته می شود. این برابر با این است که در دومین کد سر راست تگ input را بنویسیم و سپس عبارت asp-for را به کار ببریم.

همچنین به متد ()BeginForm دو ورودی فرستاده شده است که یکم نام متدی ازکلاس کنترل گر است که داده های فرستاده شده از فرم را دریافت می کند و دومی نام کلاس کنترل گر است که متد عضوی از آن است. این دقیقا برابر با این است که عبارت های asp-action و asp-controller را در تگ form به کار ببریم.

بنابراین کد زیر برآیند هر یک از کدهای بالا است. همچنین می توانیم بدون نیاز به Html Helper و Tag Helper نیز فرم اچ تی ام ال را آماده کنیم. در کد زیر فرض کنید دستی مقدار ویژگی action را برابر با Home/Index گذاشته ایم بدیم معنی که داده های فرستاده شده از فرم به متد ()Index از کلاس Home فرستاده می شوند.

کاربرد عبارت asp-for برای افزودن و مقدار دهی دو ویژگی به نام های name و id است. ویژگی name در تگ های درون فرم اچ تی ام ال بسیار مهم است زیرا درون متد کنترل گر، از مقدار این ویژگی برای دسترسی به مقدار فرستاده شده از آن فیلد درون تگ form کمک گرفته می شود. همچنین اگر در کلاس مدل برای تعریف ستون های جدول از Data Annotation کمک گرفته باشیم، پس به کمک asp-for نوع تگ اچ تی ام ال مطابق با Data Annotation خواهد بود.

توجه کنید در دوره Entity Framework درباره کلاس مدل، ویژگی های کلاس مدل که مطابق با ستون جدول هستند و همچنین درباره Data Annotation گفته ایم. در کد زیر یک کلاس مدل به نام RegisterViewModel تعریف شده است که درون آن ویژگی های متفاوتی با Data Annotation تعریف شده اند. هر دو ویژگی اجباری (Require) هستند، پس ستون های جدول NOT NULL خواهند بود. نخستین ویژگی برای نشانی رایانامه و دومی برای گذرواژه است.

اکنون می خواهیم یک فرم به کمک تگ های اچ تی ام ال و Tag Helper ها بسازیم که داده ها را برای کلاس مدل RegisterViewModel دریافت کنند. کد زیر چگونگی آن را نشان داده است. سه نکته در اینجا باید گفت: یکم آن که، بالای فایل نما و به کمک عبارت model@ کلاس مدل را پیوست کرده ایم، پس فایل نما به شدت وابسته به مدل داریم. دوم آن که، درون تگ های input به ترتیب برای عبارت های asp-for، مقدارهای Email و Password را انتساب داده ایم که از این رو باید ویژگی های name و id به کد اچ تی ام ال افزوده شوند. سوم آن که، چون در تعریف مدل Data Annotationبه کار برده ایم، پس با توجه به نشانی رایانامه و گذرواژه بودن ویژگی های کلاس، پس به ترتیب نوع تگ های input برابر با email و password است، یعنی اینکه مقدار ویژگی type آنها به ترتیب email و password خواهد بود.

توجه کنید که Tag Helper ها کدهای سمت سرور هستند و از این رو نمی توان کد ها آنها را در مروگر دید، بلکه برآیند ها که افزودن ویژگی هایی به تگ های اچ تی ام ال است در مرورگر نشان داده می شوند. کد زیر برآیند کد بالا را نشان می دهد و می بینید که به ویژه نوع تگ اچ تی ام ال خودکار افزوده شده است. همچنین چون هر دو ویژگی کلاس مدل اجباری بودند، پس ویژگی data-val با مقدار true به تگ های input افزوده شده اند.

عبارت asp-route

در ارتباط با Tag Helper های ساخت فرم اچ تی ام ال، یکی دیگر از آنها asp-route است. در کد زیر یک مسیر نامگذاری شده (Named Route) به عبارت asp-route فرستاده می شود و سپس این نام با یک مسیر تطابق داده شده و مقدار ویژگی action از تگ form را می سازند. بنابراین عبارت asp-route و دو عبارت asp-action تنهایی و asp-controller با یکدیگر، ویژگی action را برای تگ form آماده می کنند.

ویژگی formaction در اچ تی ام ال ۵

در اچ تی ام ال ۵ یک ویژگی تازه به نام formaction برای تگ input معرفی شده است که همسان با ویزگی action در تگ form است. بنابراین formaction نام مسیر نشانی را دریافت می کند که قرار است داده به آن فرستاده شود. توجه کنید که formaction تنها برای تگ input با نوع های image و submit به کار گرفته می شود. تگ input با نوع submit یک دگمه است و هر زمان دگمه فشار داده شود، داده های فرم به نشانی formaction فرستاده می شوند.

بنابراین با توجه به اچ تی ام ال ۵ و به کار بردن عبارت های asp-action و asp-controller برای تگ input از نوع image یا submit، برآیند افزودن و مقدار دهی ویژگی formaction برای تگ input است. بانابراین نشانی جایی که باید داده ها به آن فرستاده شوند، مشخص می شود. توجه کنید منظور از نشانی در ASP.NET Core، همان مسیر Controller/ActionMethos است.

بنابراین در کد بالا یک تگ button و همچنین یک تگ input از نوع image ساخته شده است و برای هر دو تگ عبارت های asp-controller و asp-index را مقداردهی کرده ایم. توجه کنید تگ button و تگ input از نوع submit، هر دو دگمه را برای فرم می سازند. در حالت معمول برای اداره کردن فرم ها، باید نشانی یا نام فایلی حاوی کدهایی که قرار است داده های فرستاد شده را پردازش و اداره کنند را با ویژگی action از تگ form مشخص کنیم ولی با ارائه formaction در اچ تی ام ال ۵، این کار را می توانیم درون یکی از تگ های input از نوع submit یا تگ button انجام دهیم. مزیت در این است ه می توانیم چندین دگمه داشته باشیم که هر یک از این دگمه ها خودش می داند که باید داده ها را به کدام متد از کدام کلاس کنترل گر بفرستد.

ساخت تگ textarea با Tag Helper

تگ textarea و input هر دو برای دریافت ورودی متنی از کاربر استفاده می شوند ولی textarea چند خطی است و برای نمونه برای بخش دیدگاه ها یا توضیحات به کار می رود. فرض کنید همانند زیر کلاس مدلی به نام DescriptionViewModel دارید که دارای یک ویژگی به نام Description است و به کمک Data Annotation اندازه کمینه و بیشینه را مشخص کرده ایم.

کد زیر چگونگی ساخت فرم اچ تی ام ال را نشان می دهد و همانگونه که می بینید به عبارت asp-for درون تگ textarea مقدار Description را داده ایم که نام ویژگی کلاس مدل است. همچنین چون اندازه های کمینه و بیشینه را مشخص کرده ایم، این دو نیز خودکار به تگ واگذار می شوند.

کد زیر نیز برآیند دستورهای بالا را نشان می دهد که تگ های ساخته شده در سمت کلاینت هستند. برای آگاهی بیشتر می توانید اینجا را بخوانید.