HTML Helper ها ویژگی هایی درون Razor که برای ساخت المان های HTML برگه های وب به کار می روند. HtmlHelper نام کلاسی است که از آن برای ساخت برگه های وب در پروژه های ASP.NET Core MVC  کمک گرفته می شود. این کلاس دارای Properties و Methods و Extension Methods است که می توانید برای ساخت اجزای یک برگه مانند فرم های اچ تی ام ال از آنها کمک بگیرید.

در نوشته مفهوم نما مدل به شدت وابسته به نوع ASP.NET Core MVC یک نمونه ساده از ساخت فرم های اچ تی ام ال با تگ form را نشان دادیم. آغاز یک فرم با تگ form است و میان آن تگ هایی مانند input و textarea و checkbox و radio button و button نوشته می شوند تا فیلدهای ورود و دگمه فرستادن داده ها را نمایش دهیم. کد زیر نمونه ای از ساخت یک فرم اچ تی ام ال را نشان می دهد.

ساخت یک فرم اچ تی ام ال با HtmlHelper

همانگونه که گفته شد آغاز نوشتن یک فرم اچ تی ام ال با تگ <form> و پایان آن با تگ <form/> است و از این رو، از دید سی شارپ و به کمک HtmlHelper آغاز ساخت یک فرم با دستور (()using(Html.BeginForm@ است. همانگونه که می بینید پس از این عبارت، آکولادهای باز و بسته نوشته شده اند، پس همه تگ های دیگر برای دریافت داده ها در میان این آکولادها نوشته می شوند.

در کد بالا و میان تگ های div می خواهیم فرم را بسازیم و از این رو برآیند دستور بالا در پایان یک کد اچ تی ام ال همانند زیر است که تگ های <form> و <form/> ساخته شده اند. در کد اچ تی ام ال زیر می بینید دو ویژگی action و method به تگ <form> افزوده شده اند. ویژگی method شیوه یا متد پروتکل HTTP برای دریافت درخواست را نشان می دهد. همیشه و همیشه مقدار ویژگی method برای فرم اچ تی ام ال برابر با مقدار post است، زیرا متد POST شیوه دریافت درخواست یا فرستادن داده ها بر روی پروتکل HTTP است. همچنین ویژگی action نام کلاس کنترل گر و متدی از آن کلاس را دریافت می کند که قرار است داده ها به این متد کلاس کنترل گر فرستاده شوند. گفتیم که در معماری نما، کنترل گر میانجی میان نما و مدل است، پس از راه فرم های اچ تی ام ال و متد POST، داده ها و درخواست را به سرور می یا بهتر است بگوییم به یک متد از کلاس کنترل گر می فرستیم. 

متد ()AntiForgeryToken

پس از این، می توانیم به طور اختیاری متد دیگری به نام ()AntiForgeryToken را به درون عبارت using@ می افزاییم. درباره این متد در نوشته ای دیگر خواهم گفت ولی به زبان ساده، این متد برای پیش گیری از Cross-Site Request Forgery یا CSRS است. CSRF به معنی جعل درخواست میان‌وب‌گاهی، نوعی از حملات اینترنتی از خانوادهٔ تزریق اسکریپت از طریق وب‌گاه است. در این نوع از حملات کاربری که در یک نرم‌افزار کاربردی وب ثبت ورود کرده‌است را مجبور به فرستادن یک درخواست به آن نرم‌افزار تحت وب آسیب‌پذیر می‌کنند تا عملی که می‌خواهند را انجام دهد. بنابراین ()AntiForgeryToken کاربردی امنیتی و پیش گیری از رخنه کردن به سایت را دارد.

در واقع به کمک ()AntiForgeryToken یک تگ input در میان تگ های form افزوده می شود که گونه یا type آن برابر با hidden است. البته اگر به کد اچ تی ام ال بالا نگاه کنید، خواهید دید که خود ()BeginForm این تگ input را افزوده است. همچنین مقدار ویژگی value این تگ input یک رشته از کاراکترهای تصادفی است. همچنین مقدار ویژگی name این تگ input برابر با رشته RequestVerificationToken__ است.

خود ()BeginForm این تگ input با مقدار hidden برای ویژگی type را خودکار می سازد، حتی اگر ()AntiForgeryToken را ننویسید.

متد ()ValidationSummary

HtmlHelper از Data Annotation های نوشته شده در سطح مدل و در هر یک از کلاس های مدل پشتیبانی می کنند. Data Annotation ها ویژگی های درون Entity Framework هستند که محدودیت ها و قاعده ها و گونه داده ای را برای ستون های یک جدول پیاده سازی می کنند. برای نمونه می توانیم کلید اصلی را تعیین کنیم یا تعیین کنیم که آیا یک ستون Required است. Required بودن برابر NOT NULL است، پس باید مقداری در زمان اجرای دستور INSERT برای آن ستون تعیین شود.

Data Annotation در Entity Framework – بخش یکم

Data Annotation در Entity Framework – بخش دوم

Data Annotation در Entity Framework – بخش سوم

زمانی که می خواهیم از راه فرم اچ تی ام ال داده ها را درون جدول درج کنیم، پس باید پیش از فرستاده شدن داده از فرم به متد کلاس کنترل گر، باید اطمنیان داشته باشیم که آیا کاربر فیلدهای اجباری را پر کرده است یا نه؟ به عبارتی باید در سمت کلاینت، مطمئن شویم که همه داده های مطابق با نیازهای جدول فراهم شده و سپس آنها را مند کلاس کنترل گر و سپس به مدل بفرستیم. بنابراین ()ValidationSummary متدی است که فهرستی مرتب (از تگ های li) از خطاها را بر پایه Data Annotation درون همین برگه فرم اچ تی ام ال فهرست می کند.

افزودن تگ ها به درون فرم

اکنون می خواهیم برای یک مدل ویژه مانند کلاس Employee که در نوشته های زیر درباره آن گفته ایم، یک فرم با متدهای HtmlHelper بسازیم. بنابراین نیاز تا شما برای آشنایی با مفهوم عبارت model@ دو نوشته زیر را بخوانید. دست کم، باید نخستین نوشته زیر را خوانده باشید. بر پایه شکل زیر، آغاز فایل نما و به کمک عبارت model@ کلاس Employee پیوست شده است. توجه کنید هنوز وارد بحث Entity Framework نشده ایم، پس هنوز نمی توانیم Data Annotation و کاربرد ()ValidationSummary را نشان دهیم و این بماند برای نوشته های پیش رو.

کد شکل بالا کامل نیست و تنها می خواهم نشان دهم، متدهایی مانند ()LabelFor و ()TextBoxFor و ()CheckBoxFor و ()TextAreaFor و دیگر متدهای همسان، یک تابع بی نام می گیرند که یک پارامتر دریافت می کند که این پارامتر به مدل و ویژگی های کلاس مدلی اشاره می کند که در بالای فایل نما و به کمک model@ پیوست شده اند. در اینجا نام پارامتر تابع بی نام m است و می بینید که به کمک آن می توانیم به متدهای کلاس مدل (در اینجا FName و LName و Age) دسترسی داشته باشیم و تگ های اچ تی ام ال را برای هر یک از آنها آماده کنیم. کد زیر نشان می دهد به کمک ()LabelFor یک تگ برچسب برای هر ورودی ساخته ایم و سپس به کمک ()TextAreaFor تگ های input از نوع text را برای ورود هر یک از ویژگی های کلاس مدل آماده کرده ایم. من در اینجا برای سادگی همگی را input در نظر گرفته ام.

کد زیر، کدهای اچ تی امل بدست آمده از کد سی شارپ بالا را نشان می دهد. همانگونه که می بینید، برآیند ()LabelFor تگ label است که مقدار ویژگی for آن برابر با نام ویژگی از کلاس مدل مانند FName است که به کمک پارامتر تابع بی نام به آن دسترسی پیدا کرده ایم. همچنین برآیند ()TextBoxFor برابر با یک تگ input است که مقدار ویژگی type آن برابر با text و مقدار ویژگی های id و name آن برابر با نام همان ویژگی مانند FName است که به کمک پارامتر تابع بی نام به آن دسترسی پیدا کرده ایم. ویژگی id برای هر تگ اچ تی ام ال برای نوشتن سی اس اس به کار می رود ولی برای تگ های درون فرم اچ تی ام ال مانند input یا textarea یا checkbox، از مقدار تعیین شده برای ویژگی name درون متد کنترلگر کمک می گیریم تا به به مقدار هر یک از این فیلدهای فرم دسترسی داشته باشیم و به کمک آنها احتمالا کوئری های پایگاه داده را آماده کنیم.

همچنین در کد سی شارپ دستی تگ button را افزوده ام زیرا پس از کلیک روی این دگمه است که اگر هیچ خطایی در ورود داده ها (مانند داده های اجباری و یا درست نوشتن یک آدرس ایمیل) رخ نداده باشد، داده های فرستاده شده از فایل نما (فرم اچ تی ام ال) به متدی فرستاده می شوند که نام کلاس و نام متد در ویژگی action از تگ form آورده شده است. بنابراین تا بدین جا نشان دادیم که متدهای ()LabelForm و ()TextBoxForm به ترتیب برابر با تگ های label و input در اچ تی ام ال هستند که هر یک در پارامتر نخست خود، تابعی بی نام با یک پارامتر را دریافت کرده که این پارامتر به یکی از ویژگی های کلاس مدلی اشاره می کند که در بالای فایل نما به کمک model@ پیوست شده است.

تعین کلاس های تگ ها

برای آنکه بتوانیم بر روی تگ های افزوده شده با متدهای HtmlHelper سی اس اس را اعمال کنیم باید دومین پارامترهای متدهایی مانند ()LabelFor و ()TextBoxFor را به گونه نمونه مثال زیر تعیین کنیم. توجه کنید در کدهای سی شارپ بالا یا درون کدهای اچ تی ام ال حاصل از آن من هر یک از دو متد ()LabelFor و ()TextBoxFor را درون تگ های <li> و <li/> قرار داده ام که کلاس آنها form-group است. همچنین کلاس تگ ul را list-unstyle گذاشته ام که بهمگی کلاس هایی تعریف شده در Bootstrap هستند، زیرا ASP.NET Core MVC پیش فرض Bootstrap را به کار می برد. اکنون تنها برای یک نمونه شما می توانید ویژگی class برای هر یک از تگ های فرم را مانند زیر تعریف کنید.

تعین متن برای تگ label

اگر به شکل فرم ساخته شده در بالا نگاه کنید، می بینید که برای تگ label همان نام ویژگی مانند FName استفاده شده است که این اصلا مناسب نیست. راه حل آن مانند کد زیر است که یک رشته به عنوان متن نمایشی را به پارامتر دوم ()LabelFor بفرستیم. همانگونه که در شکل زیر می بینید، سپس این رشته ها برای متن label ها به کار می روند. به طور کلی دومین پارامتر متدهای ساخت تگ می تواند یک رشته باشد که متنی برای نمایش را نشان می دهد. این برابر با ویژگی placeholder است. توجه کنید چون من از label برای هر فیلد و تگ ورودی داده ها کمک گرفته ام، پس می توانم اختیاری دومین پارامتر ()TextBoxFor ها را null تعیین کنیم.

تفاوت میان ()LabelFor و ()Label چیست

به طور کلی آن دسته از متدهایی که پایان نام آنها For است، زمانی به کار می روند که فایل نما به شدت وابسته به مدب باشد، زمانی که بالای فایل و به کمک model@ کلاس مدل پیوست شده باشد. این تگ های که در دو دسته دارای For و بی For هستند در جدول زیر نشان داده شده اند برای ساخت یک فرم به کار می روند که همگی باید درون ()BeginForm فراخوانی شوند.  برای نمونه ()TextAreaFor و ()TextArea برابر با  تگ textarea در اچ تی ام ال، ()CheckBoxFor و ()CheckBox برابر با تگ checkbox در اچ تی ام ال است. همچنین گفتیم که ()TextBoxFor و همچینن ()TextBox برای ساخت تگ input با نوع text هستن که متن درون آن نشان داده می شود. برای ساخت فیلد ورود پسورد باید از ()PasswordFor و ()Password کمک بگیرید.