بررسی متد DropDownList و DropDownListFor در ASP.NET MVC

بررسی متد DropDownList و DropDownListFor در ASP.NET MVC

در این پست از وبسایت پرووید در رابطه با بررسی متد DropDownList و DropDownListFor در ASP.NET MVC صحبت خواهیم کرد. معماری MVC از معمول ترین و پرکاربردترین معماری های ساخت وب اپلیکیشن ها می باشد.

در این مقاله از وب سایت پرووید که بخشی دیگر از سری آموزش جامع ASP.NET MVC می باشد در رابطه با ایجاد کردن یک DropDownList و یا همان <select> در ASP.NET MVC صحبت خواهیم کرد. در کلاس HtmlHelper دو Extension Method با نامهای DropDownList() و DropDownListFor() وجود دارند که به منظور ایجاد کردن یک DropDownList در HTML از آنها استفاده می شود. در آموزش کامل توسعه نرم افزار با سی شارپ در رابطه با Extension Method ها صحبت کرده ایم. به منظور بررسی این دو متد از یک Model Class به نام Student استفاده خواهیم کرد که کد آنرا در قسمت زیر مشاهده می کنید.

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 با یک نام و عناصر مشخص و همچنین HTML Attribute های مشخص مورد استفاده قرار می گیرد. کدی که در قسمت زیر مشاهده می کنید مربوط به Signature متد DropDownList() می باشد.

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

علاوه بر این 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>

همانطور که در مثال بالا مشاهده می کنید اولین پارامتر نام Property مورد نظر است که قرار است برای آن عناصری را در قالب یک لیست نشان بدهیم. پارامتر دوم از این متد لیستی از مقادیری است که باید در درون DropDownList نشان داده شوند. ما در این قسمت از متدهای کلاس Enum استفاده کرده ایم تا بتوانیم مقادیر مربوط به یک Enum به نام Gender را بخوانیم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

پارامتر سوم نمایانگر اولین عنصری است که قرار است بصورت پیش فرض در DropDownList نشان داده شود و نهایتاً پارامتر چهارم نمایانگر HTML Attribute های دیگری است که می خواهیم بر روی DropDownList لحاظ کنیم.

بررسی متد DropDownListFor()

دیگر متدی که در این آموزش مورد بررسی قرار می گیرد DropDownListFor() نام دارد که آن هم یک Extension Method است و بصورت Strongly Typed عمل می کند. این متد به منظور ایجاد کردن یک <Select> در Html مورد استفاده قرار می گیرد. تفاوت متد DropDownListFor() و متد DropDownList() در این موضوع است که در استفاده از متد DropDownListFor() باید نام Property مورد نظر از Model Class مربوطه را در قالب یک Lambda Expression تنظیم کنیم. در مورد Lambda Expression ها در آموزش ویدئویی Lambda Expression در سی شارپ به طور مفصل صحبت کرده ایم. این موضوع باعث می شود که DropDownList نهایی به Property مشخص شده از Model Class مربوطه Bind بشود و بر اساس همین موضوع مقادیری در درون آن نشان داده شود.

کدی که در قسمت زیر مشاهده می کنید Signature مربوط به متد DropDownListFor() را نشان می دهد.

MvcHtmlString Html.DropDownListFor(Expression<Func<dynamic,TProperty>> expression, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)

ضمناً با روجوع کردن به MSDN مایکروسافت می توانید دیگر Overload های مربوط به این متد را بررسی کنید.

کدی که در قسمت زیر نشان داده شده است. نحوۀ ایجاد کردن یک DropDownList با استفاده از یک Enum به نام Gender را نشان می دهد.

@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>

همانطور که در مثال بالا مشاهده می کنید اولین پارامتر برای متد DropDownListFor یک Lambda Expression است که با استفاده از آن یک Property از Model Class مربوطه را انتخاب کرده تا DropDownList نهایی به آن Bind بشود. ما در این مثال از پروپرتی StudentGender استفاده کرده ایم که از نوع یک Enum می باشد. پارامتر دوم نمایانگر عناصری است که باید در درون DropDownList نشان داده شوند. پارامتر سوم نمایانگر مقدار پیش فرضی است که باید در DropDownList نشان داده شود.

با استفاده از DropDownListFor می توانیم یک <Select> را که Attribute های Id و Name آن بر اساس نام Property انتخاب شده تنظیم شده اند ایجاد کنیم. نام Property انتخاب شده همان Student Gender می باشد و  دو عنصر با مقادیر Male و  Female در درون DropDownList قرار می گیرند. علاوه بر این مقدار پیش فرضی که DropDownList نشان داده می شود. رشتۀ Select Gender می باشد. تصویر زیر این موضوع را نشان می دهد.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک MVC استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل توسعه وب اپلیکیشن با ASP.NET MVC مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت