在ASP.NET MVC中使用DropDownList

在ASP.NET MVC中，儘管咱們能夠直接在頁面中編寫HTML控件，並綁定控件的屬性，但更方便的辦法仍是使用HtmlHelper中的輔助方法。在View中，包含一個類型爲HtmlHelper的屬性Html，它爲咱們呈現控件提供了捷徑。

咱們今天主要來討論Html.DropDownList的用法，首先從Html.TextBox開始。

Html.TextBox有一個重載方法形式以下：

public static string TextBox(this HtmlHelper htmlHelper, string name, object value);

其中name參數爲文本框name屬性（以及id屬性）的值，value參數爲文本框的默認值（即value屬性的值）。若是value參數爲null或者使用沒有value參數的重載方法，那麼此時name參數同時仍是一個鍵值，負責獲取文本框的默認值。獲取的順序爲，先從ViewData中查找是否存在鍵值爲name值的項，若是ViewData中沒有則從ViewData.Model中查找是否存在名稱爲name值的屬性，若是仍然不存在，則返回null。（具體參見HtmlHelper的InputHelper輔助方法）

也就是說

public ActionResult Test() { ViewData["Name"] = "Jade"; return View(); }

 

<%= Html.TextBox("Name")%>

這樣的代碼將會輸出這樣的HTML：

<input id="Name" name="Name" type="text" value="Jade" />

 

因爲TextBox的id和name屬性的值與ViewData中的某一項同名（均爲Name），所以TextBox的value屬性的值將自動綁定爲ViewData中Name項的值。不只是ViewData，若是view model的類型包含Name屬性，也將輸出一樣的結果：

var user = new User { Name = "Jade" }; ViewData.Model = user; return View();

 

若是ViewData和ViewData.Model中同時存在Name，則優先使用ViewData中的項。

CheckBox、Hidden、Password、RedioButton等控件也是如此，它們與TextBox同樣都使用input標記，屬性綁定的規則大體相同。

DropDownList則與TextBox等控件不一樣，它使用的是select標記。它須要兩個值：在下拉框中顯示的列表，和默認選項。而自動綁定一次只能綁定一個屬性，所以你須要根據須要選擇是綁定列表，仍是默認選項。

DropDownList擴展方法的各個重載版本「基本上」都會傳遞到這個方法上：

public static string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, string optionLabel, IDictionary<string, object> htmlAttributes) { … }

 

若是沒有指定selectList，該方法將自動綁定列表，即從ViewData中查找name所對應的值。若是提供了selectList，將自動綁定默認選項，即從selectList中找到Selected屬性爲true的SelectedListItem。（具體參見HtmlHelper方法的SelectInternal輔助方法）

例1：若是在Action方法中有以下代碼：

List<SelectListItem> items = new List<SelectListItem>(); items.Add(new SelectListItem { Text = "Kirin", Value = "29" }); items.Add(new SelectListItem { Text = "Jade", Value = "28", Selected = true}); items.Add(new SelectListItem { Text = "Yao", Value = "24"}); this.ViewData["list"] = items;

在View中這樣使用：

<%=Html.DropDownList("list")%>

那麼輔助方法將率先從ViewData中獲取key爲list的項，若是該項爲IEnumerable<SelectedListItem>類型則綁定到下拉框中，不然將拋出InvalidOperationException。因爲第二個SelectListItem的Selected爲true，則默認選中第二個。

例2：若是Action中代碼以下：

List<SelectListItem> items = new List<SelectListItem>(); items.Add(new SelectListItem { Text = "Kirin", Value = "29" }); items.Add(new SelectListItem { Text = "Jade", Value = "28"}); items.Add(new SelectListItem { Text = "Yao", Value = "24"}); this.ViewData["list"] = items; this.ViewData["selected"] = 24;

View中的代碼以下：

<%=Html.DropDownList("selected", ViewData["list"] as IEnumerable<SelectListItem>)%>

那麼輔助方法將ViewData["list"]綁定爲下拉框，而後從ViewData中獲取key爲selected的項，並將下list中Value值與該項的值相等的SelecteListItem設爲默認選中項。

以上兩種方法儘管能夠實現DropDownList的正確顯示，但並不是最佳實踐。在實際項目中，咱們更但願在代碼中使用強類型。例如上面兩例中，SelectListItem的Text和Value原本是User對象的Name和Age屬性，然而上面的代碼卻絲毫體現不出這種對應關係。若是User列表是從數據庫或其餘外部資源中得到的，咱們難道要用這樣的方式來綁定嗎？

var users = GetUsers(); foreach (var user in users) { items.Add(new SelectListItem { Text = user.Name, Value = user.Age.ToString() }); }

這顯然是咱們所沒法容忍的。那麼什麼是最佳實踐呢？

ASP.NET MVC爲DropDownList和ListBox（都在html中使用select標記）準備了一個輔助類型：SelectList。SelectList繼承自MultiSelectList，然後者實現了IEnumerable<SelectListItem>。也就是說，SelectList能夠直接做爲Html.DropDownList方法的第二個參數。

MultiSelectList包含四個屬性，分別爲：

• Items：用於在select標記中出現的列表，一般使用option標記表示。IEnumerable類型。
• DataTextField：做爲option的text項，string類型。
• DataValueField：做爲option的value項，string類型。
• SelectedValues：選中項的value值，IEnumerable類型。

顯然，做爲DropDownList來講，選中項不可能爲IEnumerable，所以SelectList提供了一個新的屬性：

• SelectedValue：選中項的value值，object類型。

同時，SelectList的構造函數以下所示：

public SelectList(IEnumerable items, string dataValueField, string dataTextField, object selectedValue) : base(items, dataValueField, dataTextField, ToEnumerable(selectedValue)) { SelectedValue = selectedValue; }

 

因而咱們的代碼變爲：

var users = GetUsers(); var selectList = new SelectList(users, "Age", "Name", "24"); this.ViewData["list"] = selectList;

 

<%=Html.DropDownList("list")%>

 

固然，你也可使用不帶selectedValue參數的構造函數重載，而在view中顯式指定IEnumerable<SelectListItem>，並在ViewData或view model中指定其餘與DropDownList同名的項做爲默認選項。

最後讓咱們來回顧一下DropDownList的三種用法：

1. 創建IEnumerable<SelectListItem>並在其中指定默認選中項。
2. 創建IEnumerable<SelectListItem>，在單獨的ViewData項或view model的屬性中指定默認選中項。
3. 使用SelectList。