DropDownList與DropDownListFor的用法

 

一、DropDownList範例

Mvc裡所提供DropDownList擴充方法是用來協助開發者根據檢視模型或資料來快速產出select tag項目，

以下是用於DropDownList八個擴充方法

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    string optionLabel
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    Object htmlAttributes
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    IDictionary<string, Object> htmlAttributes
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    string optionLabel
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    IDictionary<string, Object> htmlAttributes
)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    Object htmlAttributes
)

 

1、SelectExtensions.DropDownList 方法 (HtmlHelper, String)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name
)

參數說明

string name：使用指定檢視資料(ViewData or ViewBag)名稱，也一併指定回傳表單的名稱。

 

實作範例

1-1、於Controller準備要傳ViewData物件給View的Key

public ActionResult Index()
{
    List<SelectListItem> mySelectItemList = new List<SelectListItem>();

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "apple",
        Value = "apple",
        Selected = true
    });

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "banana",
        Value = "banana",
        Selected = false
    });

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "watermelon",
        Value = "watermelon",
        Selected = false
    });

    ViewBag.Fruit = mySelectItemList;

    return View();
}

1-2、接到從Controller傳來Key名稱為Frtit的ViewData物件

View的內容為

@Html.DropDownList("Fruit")

1-3、結果畫面與html程式碼為

說明：

(1)、此DropDownList擴充方法是利用ViewData(包含ViewBag)檢視資料來傳給View，

而不是模型資料(Model)。

(2)、@Html.DropDownList(string name)的name參數功能有二，

一是用來指定從Controller傳來檢視資料key名稱("Fruit")並接收要產生的項目，

二也是要指定傳回Controller的表單欄位名稱，這點很重要也很容易被忽略。

(3)、注意，上圖的<select id="Fruit" name="Fruit">，就是由@Html.DropDownList("Fruit")產生的。

(4)、DropDownList清單中每一個項目都是由SelectListItem所構成的。

 

2、SelectExtensions.DropDownList 方法 (HtmlHelper, String, String)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    string optionLabel
)

參數說明

optionLabel：預設空白項目的文字。 這個參數可以是 null。

 

實作範例

2-1、承上一實作範例，於View改成@Html.DropDownList("Fruit","xxx")，

則網頁畫面變為

 

3、SelectExtensions.DropDownList 方法 (HtmlHelper, String, IEnumerable<SelectListItem>)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList
)

參數說明

string name：指定回傳表單的名稱。

IEnumerable<SelectListItem> selectList：SelectListItem 物件的集合，這些物件是用來填入下拉式清單。

 

實作範例

Controller改成如下

public ActionResult Index()
{
    List<SelectListItem> mySelectItemList = new List<SelectListItem>();

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "apple",
        Value = "apple",
        Selected = true
    });

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "banana",
        Value = "banana",
        Selected = false
    });

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "watermelon",
        Value = "watermelon",
        Selected = false
    });

    return View(mySelectItemList);
}

View改成如下

@model IEnumerable<SelectListItem>

@Html.DropDownList("Fruit", @Model)

結果畫面如下

說明：

(1)、這一次DropDownList的第一個參數只剩「指定回傳表單名稱」的功能了，

因為「接收產生的項目」之功能將交由IEnumerable<SelectListItem> selectList參數，

也就是DropDownList的第二個參數來做。

 

4、SelectExtensions.DropDownList 方法 (HtmlHelper, String, IEnumerable<SelectListItem>, Object)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    Object htmlAttributes
)

參數說明

string name：指定回傳表單的名稱。

IEnumerable<SelectListItem> selectList：SelectListItem 物件的集合，這些物件是用來填入下拉式清單。

Object htmlAttributes：針對項目設定的 HTML 屬性。

 

說明：

用法跟以上列出的擴充方法大同小異，只是比較要注意的是htmlAttributes的寫法，

範例如下

@model IEnumerable<SelectListItem>

@Html.DropDownList("Fruit", @Model, new { size = 10, maxlength = 10, @class = "additionalInfo" })

畫面為

 

5、SelectExtensions.DropDownList 方法 (HtmlHelper, String, IEnumerable<SelectListItem>, IDictionary<String, Object>)

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    IDictionary<string, Object> htmlAttributes
)

參數說明

string name：指定回傳表單的名稱。

IEnumerable<SelectListItem> selectList：SelectListItem 物件的集合，這些物件是用來填入下拉式清單。

IDictionary<string,Object> htmlAttributes：針對項目設定的 HTML 屬性。

 

說明：

用法跟上例大同小異，只是比較要注意的是htmlAttributes的寫法，

範例如下

@model IEnumerable<SelectListItem>

@Html.DropDownList("Fruit", @Model,
new Dictionary<string, object>() {
    { "size", 10 },
    { "maxlength", 10 },
    { "class","myclass"}
})

Html程式碼為

 

二、DropDownListFor範例

列出DropDownListFor六個多載方法

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList
)

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    IDictionary<string, Object> htmlAttributes
)

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    Object htmlAttributes
)

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    string optionLabel
)

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    IDictionary<string, Object> htmlAttributes
)

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    Object htmlAttributes
)

 

由於跟DropDownList範例大同小異，所以我就簡化敘述了。

1、SelectExtensions.DropDownListFor<TModel, TProperty> Method (HtmlHelper<TModel>, Expression<Func<TModel, TProperty>>, IEnumerable<SelectListItem>, Object)

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    Object htmlAttributes
)

參數說明：

Expression<Func<TModel,TProperty>> expression：使用lambda運算式來表示指定回傳表單的名稱。

IEnumerable<SelectListItem> selectList：SelectListItem 物件的集合，這些物件是用來填入下拉式清單。

Object htmlAttributes：針對項目設定的 HTML 屬性。

 

實作範例

1-1、於Model先新增一個基本的class

namespace WebApplication1.Models
{
    public partial class Class1
    {
        public string Id { get; set; }
        public string name { get; set; }
    }
}

1-2、於Controller內容改為

public ActionResult Index()
{
    List<SelectListItem> mySelectItemList = new List<SelectListItem>();

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "apple",
        Value = "apple",
        Selected = true
    });

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "banana",
        Value = "banana",
        Selected = false
    });

    mySelectItemList.Add(new SelectListItem()
    {
        Text = "watermelon",
        Value = "watermelon",
        Selected = false
    });

    ViewBag.Fruit = mySelectItemList;

    return View(new Class1());
}

1-3、View的內容為

@model WebApplication1.Models.Class1

@{
    IEnumerable<SelectListItem> fruit = ViewBag.Fruit;
}

@Html.DropDownListFor(m => m.Id, fruit, new { @class = "form-control" })

結果畫面為

說明：

(1)、此擴充方法比較需要注意的地方應該是「使用lambda運算式來表示指定回傳表單的名稱」參數，

該參數做作用相等於上幾個例子所介紹的DropDownList的第一個參數。

(2)有關SelectListItem與SelectList的用法請考「SelectListItem與SelectList的用法」

 

SelectList最後有繼承到IEnumerable<SelectListItem>與IEnumerable，

所以SelectList在跟DropDownListFor配合時的用法於上面例子已經清楚說明，

需要注意的是在使用DropDownListFor至少需要指定資料集、

資料值欄位和資料文字欄位以上三個參數，才可以在網頁上正確呈現。

注意使用DropDownListFor或DropDownList其參數都必須從Model而來，否則selectedValue會無作用。

 

參考資料：

HTML “optgroup” support in DropDownList – ASP.NET MVC 5.2

ASP.NET MVC – Extending the DropDownList to show the items grouped by a category

SelectListItem與SelectList的用法