آموزش ایجاد کادر کشویی DropDownList با MVC HtmlHelper

آموزش ایجاد یک کادر کشویی DropDownList با کلاس HtmlHelper در ASP.Net MVC Razor :

در این درس به آموزش نحوه ایجاد یک کادر کشویی DropDownList با استفاده از HtmlHelper در Razor View های ASP.Net MVC خواهیم پرداخت.
کلاس HtmlHelper دارای دو متد ویژه جهت ایجاد یک المنت <select> یا کادر کشویی DropDownList در Razor View است :

• متد ()DropDownList
• متد ()DropDownListFor

از کلاس Student Model زیر در کد های این درس استفاده خواهیم کرد :

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public Gender StudentGender { get; set; }
}
public enum Gender
{
    Male,
    Female    
}

آموزش کار با متد ()DropDownList :

متد Html ()DropDownList یک کادر کشویی یا المنت <select>
را با name، آیتم های مورد نظر (list items) و خواص html مختلف تعیین شده جهت آن ، تولید می کند.
ساختار کلی استفاده از متد ()DropDownList به صورت زیر است :

MvcHtmlString Html.DropDownList(string name, IEnumerable<selectlestitem> selectList, string optionLabel, object htmlAttributes)

متد ()DropDownList دارای حالت های مختلف فراخوانی بر حسب نوع و تعداد پارامترهای ارسالی به آن ها یا overload است. برای دریافت لیست کامل این overload ها می توانید به سایت MSDN مراجعه نمایید.
کد مثال عملی زیر، نحوه ایجاد یک کنترل کادر کشویی را با استفاده از متد ()DropDownList نشان داده است :

@using MyMVCApp.Models
@model Student
@Html.DropDownList("StudentGender", 
                    new SelectList(Enum.GetValues(typeof(Gender))),
                    "Select Gender",
                    new { @class = "form-control" })

کد خروجی HTML :

<select class="form-control" id="StudentGender" name="StudentGender">
  <option>Select Gender</option> 
  <option>Male</option> 
  <option>Female</option> 
</select>

در کد مثال فوق، پارامتر متد ()DropDownList تعیین کننده نام خاصیت مورد نظر مدل (model property) است که می خواهیم آیتم های آن را در کادر کشویی نمایش دهیم. پارامتر دوم تعیین کننده لیست مقادیر (values) هایی است که می خواهیم در کادر کشویی قرار بگیرند. برای دریافت لیست آیتم از تابع Enum استفاده کرده ایم که توانایی خواندن مقادیر یک متغیر Enum (متغیر چند مقداری) را داراست.
پارامتر سوم نیز تعیین کننده یک عنوان label است که به صورت پیش فرض، در آیتم اول کادر کشویی نمایش داده شده و توضیحاتی را راجع به سایر آیتم ها ارائه می دهد.
در آخر هم پارامتر چهارم، تعیین کننده خواص html مثل کلاس CSS و ... است که می خواهیم به کنترل DropDownList اعمال شوند.

آموزش استفاده از تابع ()DropDownListFor در MVC Razor View :

ساختار کلی استفاده از متد ()DropDownListFor به صورت زیر است . این متد دارای overload های مختلفی است که می توانید لیست کامل آن ها را در سایت MSDN مشاهده نمایید.

MvcHtmlString Html.DropDownListFor(Expression<func<dynamic,tproperty>> expression, IEnumerable<selectlestitem> selectList, string optionLabel, object htmlAttributes)

کد مثال عملی زیر، یک کادر کشویی DropDownList را برای خاصیت Gender مدل Student Model، که از نوع Enum است، تولید می کند :

@using MyMVCApp.Models
@model Student
@Html.DropDownListFor(m => m.StudentGender, 
                    new SelectList(Enum.GetValues(typeof(Gender))), 
                    "Select Gender")

خروجی کد HTML :

<select class="form-control" id="StudentGender" name="StudentGender">
  <option>Select Gender</option> 
  <option>Male</option> 
  <option>Female</option> 
</select> 

در کد مثال فوق، پارامتر اول متد ()DropDownList یک lambada expression بوده که نام خاصیتی از مدل Student Model را جهت نمایش در کادر کشویی تعیین می کند. این پارامتر خاصیت مورد نظر را به المنت select در صفحه متصل خواهد کرد. برای این پارامتر متغیر چند مقداری (Enum) با نام StudentGender را تعیین کرده ایم.
پارامتر دوم نیز تعیین کننده لیست آیتم هایی است که با کمک SelectList در کادر کشویی نمایش داده خواهند شد.
پارامتر سوم نیز یک عنوان یا OptionLabel بوده که به عنوان آیتم اول در کادر کشویی نشان داده شده و معمولا توضیحاتی را راجع به سایر آیتم ها، بیان می کند.
در نهایت، کد فوق، یک کادر کشویی DropDownList همانند خروجی زیر را با name و id برابر با نام خاصیت مدل یعنی StudentGender و دو آیتم “Male” و “Female” تولید خواهد کرد :

خروجی کد فوق بر روی صفحه ( View )