در نوشته  بخشی از متدهای HtmlHelper، دو متد ()LabelFor و ()TextBoxFor را گفتیم که برای طراحی form به کار می روند. آغاز طراحی با عبارت ()BeginForm است و درون آن دیگر متدها فراخوانی می شوند. در اینجا می خواهیم یک جمع بندی از متدهای HtmlHelper دیگر مانند ()RadioButtonFor و ()TextAreaFor و ()DropDownList آشنا شویم.

تطابق تگ های اچ تی ام ال با متدهای HtmlHelper

فرض کنید کلاس مدلی داریم که ویژگی های یک کارمند مانند نام، نام خانوادگی، سن، جنسیت و مدیر یا کارمند معمولی بودن را تعریف می کند. همچنین یک فیلد نیز برای دریافت توضیح هایی درباره کارمند داریم. برای فیلدهای نام و نام خانوادگی می توانیم در اچ تی ام ال تگ input از نوع text داشته باشیم که این برابر با به کار گیری متد ()TextBox یا ()TextBoxFor است. برای جنسیت نیز می توانیم تگ select به کار ببریم که یک لیست باز شدنی از دو مقدار Male و Female است و این برابر با ()DropDownList یا ()DropDownListFor است. برای نشان دادن نوع کارمندی می توانیم تگ input با نوع radio را به کار ببریم که برابر با ()RadionButton یا ()RadionButtonFor است.

کلاس مدل

کد زیر کلاس مدل را نشان می دهد که ویژگی های FName و LName هر دو رشته و Age شماره صحیح است. ویژگی Type که نوع کارمندی را نشان می دهد، یک رشته و فیلد Gender که جنسیت را نشان می دهد، از نوع یک enum است. همچنین Description نیز برای دریافت توضیحی درباره کارمند است. هنوز به ساخت پایگاه داده نرسیده ایم ولی اگر دوره Entity Framework را خوانده باشید، می دانید که این نوع های مدل به نوع های SQL نگاشت داده می شوند.

ساخت DropDownList

در اچ تی ام ال برای ساخت DropDownList باید تگ select به همراه دو یا بیشتر تگ input در آن به کار ببرید. کد زیر نمونه ای از آن با دو تگ option یکی برای Male و دیگری برای Female را نشان می دهد. توجه کنید ویژگی name در همه تگ های درون فرم برای این است که در متد کنترل گر مربوطه به مقدار آن تگ دسترسی داشته باشیم. بنابراین در کد زیر و با مقدار ویزگی name درون متد کنترل گر می فهمیم که کدام یک از option ها انتخاب شده است.

برای ساخت DropDownList در HtmlHelper متدی به نام ()DropDownList را به کار می بریم. بر پایه کد زیر، آرگومان سوم آن همانند یک رشته است که در بالای لیست نمایشی نشان داده می شود که در اینجا من رشته Select Gender را به کار برده ام. این همسان با نخستین option درون تگ select  است. 

در کلاس یک ویژگی به نام Gender ساخته ایم که از نوع کلاس Enum است و دارای دو مقدار به نام Male و Female است که جنسیت را مشخص می کند. در کد بالا دومین پارامتر یک نمونه از کلاس SelectList است که درون آن و به کمک متد ()GetValues از کلاس Enum، مقدارهای ویژگی Gender از کلاس مدل Employee را واکشی کرده ایم. بنابراین در اینجا همسان با این است که دو تگ option دیگر ساخته باشیم.

آرگومان یکم نیز مقداری است که برای ویژگی name در نظر گرفته می شود که در اینجا من آن را EmployeeGender نامگذاری کرده ام. بنابراین با کد بالا در پایان کد اچ تی ام ال همانند زیر خواهیم داشت. همانگونه که می بینید مقدار ویژگی name برابر EmployeeGender است که همان آرگومان نخست در تابع ()DropDownList است. همچنین مقدار ویژگی id برای سی اس اس نیز برابر با آرگومان یکم است.

عبارت using@ در فایل نما و Razor

اما چگونه به ویژگی کلاس Employee در متد ()GetValues از کلاس Enum دسترسی پیدا کرده ایم. در کد نویسی سی شارپ، برای دسترسی به یک کلاس باید به کمک دستور using در آغاز فایل، به نام کلاس یا فضای نامی که کلاس در آن تعریف شده است دسترسی پیدا کنیم. فضای نام مفهومی منطقی است که چندین کلاس در یک گروه دسته بندی می شوند و این گروه را فضای نام (Name Space) می نامیم و سپس به آن یک نام می دهیم

بنابراین برای دسترسی به یک کلاس و در اینجا کلاس مدل، باید در بالای فایل نما فضای نامی که کلاس های مدل در آن قرار دارد را با using@ پیوست کنیم. همه مدل ها در مسیر ProjectName/Models قرار دارند، یعنی همگی در پوشه Models در زیر پوشه پروژه هستند، پس باید دستور using ProjectName.Models@ را به کار ببریم. پس حتما و حتما برای دسترسی به ویژگی Type از کلاس Employee دستور فوق را بالای فایل نما و زیر عبارت model@ به کار ببرید.

توجه کنید عبارت using@ برای پیوست کردن یک فضای نام در فایل نما و دسترسی به کلاس های آن است ولی model@ برای ساخت یک فایل نما به شدت وابسته به مدل است که سپس می خواهیم در ساخت فرم اچ تی ام ال و آماده سازی آن فرم برای دریافت داده ها برای ویزگی های کلاس کمک بگیریم. همچنین عبارت دیگر که در نوشته های پیشین گفته ایم، عبارت Model (با M بزرگ) است و از آن برای دسترسی به نمونه های یک کلاس مدل استفاده می کنیم که از متد کنترل گر به فایل نما فرستاده شده اند. بنابراین دو کد زیر در آغاز فایل نما اجباری است.

مفهوم نما مدل به شدت وابسته به نوع ASP.NET Core MVC – درباره عبارت model@

نمایش داده های یک مدل در نما ASP.NET Core MVC – درباره عبارت Model

ساخت RadioButton

در اچ تی ام ال برای ساخت RadioButton از تگ input با نوع radio کمک می گیریم، یعنی مقدار ویژگی type تگ input برابر با radio خواهد بود. می توانیم چندین Radion Button داشته باشیم ولی تنها می توانیم یکی از آنها را انتخاب کنیم. در کد زیر دو تگ input از نوع radio داریم، پس مقدار ویژگی type هر دو برابر با radio است. همچنین مقدار ویژگی name هر دو یکی و برابر با رشته Type است. این بدین معنی است که این ذو Radio Button در یک گروه هستند. همچنین مقدار ویژگی Value هر یک متفاوت و برابر با ارزش انتخابی آن Radio Button است.

برای ساخت RadioButton در HtmlHelper باید یکی از دو متد ()RadioButtonFor یا ()RadioButton را به کار ببریم. در اینجا و درون کلاس مدل Employee یک ویژگی به نام Type داریم که از نوع رشته است. درون کدهای زیر دو بار متد ()RadionButtonFor فراخوانی شده است که آرگومان اول آنها یک تابع بی نام که دارای یک پارامتر است که از طریق این پارامتر به ویژگی Type کلاس Employee دسترسی پیدا کرده ایم. بنابراین در اینجا یک چیز رخ می دهد و آن اینکه بر پایه کدهای اچ تی ام ال بالا، دو تگ input از نوع radio ساخته می شود که مقدار ویژگی name آنها یکسان و برابر با نام ویژگی است که در آرگومان اول آن را استفاده کرده ایم که در اینجا برابر با ویژگی Type است، پس مقدار ویژگی name هر دو برابر با رشته Type می شود.

دومین آرگومان برابر مقداری است که به هر یک از ویژگی های value تگ های input از نوع radio داده می شود. بنابراین چون مقدار ویژگی name آنها یکی است، پس یک گروه از RadioButton ها را داریم که می توانیم هر یک را با یک مقدار name انتخاب کنیم، و سپس این مقدار برای ویژگی مربوطه از کلاس مدل در نظر گرفته می شود.

ساخت TextArea

در اچ تی ام ال برای دریافت یک متن بزرگ و چند خطی از تگ textarea کمک می گیرم. تفاوت textarea و input در این است که textarea چند خطی ولی input تک خطی است. کد زیر تگ textarea را ساخته ایم که مقدار ویژگی های name و id آن برابر با Description است که سپس برای دسترسی به مقدار آن، از مقدار name کمک می گیریم.

بنابراین بر پایه کد زیر از متد ()TextAreaFor برای ساخت تگ textarea استفاده می کنیم. آرگومان نخست آن تابعی بی نام است که یک پارامتر دارد که با آن به متدی از کلاس مدل دسترسی پیدا می کنیم که قرار است محتوای textarea برای آن در نظر گرفته شود. همچنین دومین پارامتر دیگر ویژگی را مشخص می کند. این کار در همه متدها یکسان است و در نوشته بخش یکم گفتیم که با یک عبارت new و درون آکولادهای باز و بسته ویژگی ها را مشخص می کنیم. برای تعیین ویژگی class برای تگ عبارت class@ را به کار می بریم و در اینجا برای تعیین شمار ستون ها با ویژگی cols و شمار سطرها با ویژگی rows به ترتیب عبارت های cols@ و rows@ را به کار می بریم که این عبارت ها با ویرگول از هم جدا می شوند.

همه کد به کار رفته

کد زیر تمامی آنچه که نیاز داریم را نشان می دهد. توجه کنید من برای هر جایی که نیاز بود یک برچسب ساخته ام که این کار به کمک ()LabelFor انجام شده است. همچنین توجه کنید ما از فایل نمای به شدت وابسته به مدل کمک گرفته ایم، پس باید نام کلاس مدل را با عبارت  model@ در آغاز فایل نما پیوست کنیم.