ایجاد HtmlHelper در MVC

در این مقاله نحوه ایجاد یک کلاس HtmlHelper در MVC را خواهیم اموخت. HtmlHelper متدهای دنیای mvc هستند که در کد دستوری razor به کار می روند که با استفاده از آن می توان خروجی Html را تغییر داد.

ایجاد HtmlHelper در MVC

HtmlHelper یک کلاس پویای ساده می باشد که دارای متدهای extension است که به ما کمک می کند، تگ های html را با استفاده از کد Html@ برگرداند. این مفید است زیرا مجبور نیستیم که تگ html را در هر زمان بنویسیم. ما فقط به یک کد ساده مثل Html.LabelFor@ یا Html.Label نیاز داریم که استفاده از HtmlHelper خیلی ساده هستند.

HtmlHelper در ASP.Net متدهایی هستند که یک رشته را برمیگرداند که مانند زیر می باشد :

Html.TextBox@

Html.TextBoxFor@

Html.Label@

Html.LabelFor@

Html.DropDownList@

Html.DropDownListFor@

Html.ActionLink@

Html.CheckBox@

Html.CheckBoxFor@

Html.BeginForm@

Html.EndForm@

Html.TextArea@

Html.ListBox@

Html.RadioButton@

مرحله اول : ابتدا یک Asp.Net MVC application با استفاده از MVC template ایجاد کنید که در شکل زیر مشاهده می کنید :

مرحله دوم : یک پوشه به نام Helper در پروژه ایجاد کنید.

مرحله سوم : برای ایجاد متد Extension ما نیاز به ساخت یک کلاس پویا داریم که فضای نام System.Web.Mvc برای دسترسی به کلاس  htmlhelper می باشد.

ما یک متد ساده به اسم MyTextBox با پارامتر this HtmlHelper helper برای گسترش HtmlHelper داریم و تعدادی پارامتر Id, Name, Placeholder اضافه کردیم.

دستورات کد زیر را در پوشه helper در فایل MyTextBox.cs اضافه کنید :

در تصویر بالا یک بار متد و کلاس extension ایجاد می شود و در حال حاضر ما کنترل ورودی را با استفاده از کلاس TagBuilder ایجاد کردیم. کلاس TagBuilder به ما کمک می کند که کنترل Html ایجاد کنیم و صفت های مختلفی را می توانیم با استفاده از متد MergeAttribute تنظیم کنیم که برای این گزینه یک Id,Name,Placeholder در نظر گرفته می شود.  

مرحله چهارم : در اینجا می خواهیم در View ، کنترل Html را اجرا کنیم . ما فضای نامی را انتخاب می کنیم که کلاس HtmlHelperExtension را تعریف می کند. حالا کنترل ایجاد شده را با استفاده از کلمه کلیدی Html@ اجرا کنید.

دستورات کد زیر را در پوشه View در فایل Index.cshtml اضافه کنید :

 

مرحله پنجم : برنامه را اجرا کنید و خروجی را همانند شکل زیر مشاهده می کنید :

 

فایل های ضمیمه