詳解ASP.NET MVC中DropDownList的使用
本文我們將講解DropDownList的使用,這在ASP.NET MVC中算是比較常見(jiàn)的控件。該方法對(duì)于使用HtmlHelper比較方便。
在ASP.NET MVC中,盡管我們可以直接在頁(yè)面中編寫(xiě)HTML控件,并綁定控件的屬性,但更方便的辦法還是使用HtmlHelper中的輔助方法。在View中,包含一個(gè)類(lèi)型為HtmlHelper的屬性Html,它為我們呈現(xiàn)控件提供了捷徑。
我們今天主要來(lái)討論Html.DropDownList的用法,首先從Html.TextBox開(kāi)始。
Html.TextBox有一個(gè)重載方法形式如下:
public static string TextBox(this HtmlHelper htmlHelper, string name, object value);其中name參數(shù)為文本框name屬性(以及id屬性)的值,value參數(shù)為文本框的默認(rèn)值(即value屬性的值)。如果value參數(shù)為null或者使用沒(méi)有value參數(shù)的重載方法,那么此時(shí)name參數(shù)同時(shí)還是一個(gè)鍵值,負(fù)責(zé)獲取文本框的默認(rèn)值。獲取的順序?yàn)?,先從ViewData中查找是否存在鍵值為name值的項(xiàng),如果ViewData中沒(méi)有則從ViewData.Model中查找是否存在名稱(chēng)為name值的屬性,如果仍然不存在,則返回null。(具體參見(jiàn)HtmlHelper的InputHelper輔助方法)
也就是說(shuō)
- public ActionResult Test()
- {
- ViewData["Name"] = "Jade";
- return View();
- }
- <%= Html.TextBox("Name")%>
這樣的代碼將會(huì)輸出這樣的HTML:
- <input id="Name" name="Name" type="text" value="Jade" />
由于TextBox的id和name屬性的值與ViewData中的某一項(xiàng)同名(均為Name),因此TextBox的value屬性的值將自動(dòng)綁定為ViewData中Name項(xiàng)的值。不僅是ViewData,如果view model的類(lèi)型包含Name屬性,也將輸出同樣的結(jié)果:
- var user = new User { Name = "Jade" };
- ViewData.Model = user;
- return View();
如果ViewData和ViewData.Model中同時(shí)存在Name,則優(yōu)先使用ViewData中的項(xiàng)。
CheckBox、Hidden、Password、RedioButton等控件也是如此,它們與TextBox一樣都使用input標(biāo)記,屬性綁定的規(guī)則大致相同。
DropDownList則與TextBox等控件不同,它使用的是select標(biāo)記。它需要兩個(gè)值:在下拉框中顯示的列表,和默認(rèn)選項(xiàng)。而自動(dòng)綁定一次只能綁定一個(gè)屬性,因此你需要根據(jù)需要選擇是綁定列表,還是默認(rèn)選項(xiàng)。
DropDownList擴(kuò)展方法的各個(gè)重載版本“基本上”都會(huì)傳遞到這個(gè)方法上:
- public static string DropDownList(this HtmlHelper htmlHelper,
- string name,
- IEnumerable<SelectListItem> selectList,
- string optionLabel,
- IDictionary<string, object> htmlAttributes) {
- …
- }
如果沒(méi)有指定selectList,該方法將自動(dòng)綁定列表,即從ViewData中查找name所對(duì)應(yīng)的值。如果提供了selectList,將自動(dòng)綁定默認(rèn)選項(xiàng),即從selectList中找到Selected屬性為true的SelectedListItem。(具體參見(jiàn)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的項(xiàng),如果該項(xiàng)為IEnumerable<SelectedListItem>類(lèi)型則綁定到下拉框中,否則將拋出InvalidOperationException。由于第二個(gè)SelectListItem的Selected為true,則默認(rèn)選中第二個(gè)。
例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的項(xiàng),并將下list中Value值與該項(xiàng)的值相等的SelecteListItem設(shè)為默認(rèn)選中項(xiàng)。
以上兩種方法盡管可以實(shí)現(xiàn)DropDownList的正確顯示,但并非最佳實(shí)踐。在實(shí)際項(xiàng)目中,我們更希望在代碼中使用強(qiáng)類(lèi)型。例如上面兩例中,SelectListItem的Text和Value本來(lái)是User對(duì)象的Name和Age屬性,然而上面的代碼卻絲毫體現(xiàn)不出這種對(duì)應(yīng)關(guān)系。如果User列表是從數(shù)據(jù)庫(kù)或其他外部資源中獲得的,我們難道要用這樣的方式來(lái)綁定嗎?
- var users = GetUsers();
- foreach (var user in users)
- {
- items.Add(new SelectListItem { Text = user.Name, Value = user.Age.ToString() });
- }
這顯然是我們所無(wú)法容忍的。那么什么是最佳實(shí)踐呢?
ASP.NET MVC為DropDownList和ListBox(都在html中使用select標(biāo)記)準(zhǔn)備了一個(gè)輔助類(lèi)型:SelectList。SelectList繼承自MultiSelectList,而后者實(shí)現(xiàn)了IEnumerable<SelectListItem>。也就是說(shuō),SelectList可以直接作為Html.DropDownList方法的第二個(gè)參數(shù)。
MultiSelectList包含四個(gè)屬性,分別為:
Items:用于在select標(biāo)記中出現(xiàn)的列表,通常使用option標(biāo)記表示。IEnumerable類(lèi)型。
DataTextField:作為option的text項(xiàng),string類(lèi)型。
DataValueField:作為option的value項(xiàng),string類(lèi)型。
SelectedValues:選中項(xiàng)的value值,IEnumerable類(lèi)型。
顯然,作為DropDownList來(lái)說(shuō),選中項(xiàng)不可能為IEnumerable,因此SelectList提供了一個(gè)新的屬性:
SelectedValue:選中項(xiàng)的value值,object類(lèi)型。
同時(shí),SelectList的構(gòu)造函數(shù)如下所示:
- public SelectList(IEnumerable items, string dataValueField, string dataTextField, object selectedValue)
- : base(items, dataValueField, dataTextField, ToEnumerable(selectedValue)) {
- SelectedValue = selectedValue;
- }
于是我們的代碼變?yōu)椋?/P>
- var users = GetUsers();
- var selectList = new SelectList(users, "Age", "Name", "24");
- this.ViewData["list"] = selectList;
- <%=Html.DropDownList("list")%>
當(dāng)然,你也可以使用不帶selectedValue參數(shù)的構(gòu)造函數(shù)重載,而在view中顯式指定IEnumerable<SelectListItem>,并在ViewData或view model中指定其他與DropDownList同名的項(xiàng)作為默認(rèn)選項(xiàng)。
最后讓我們來(lái)回顧一下DropDownList的三種用法:
建立IEnumerable<SelectListItem>并在其中指定默認(rèn)選中項(xiàng)。
建立IEnumerable<SelectListItem>,在單獨(dú)的ViewData項(xiàng)或view model的屬性中指定默認(rèn)選中項(xiàng)。
使用SelectList。
好了,關(guān)于DropDownList的用法我們今天就討論到這里,您會(huì)用了嗎?
原文標(biāo)題:在ASP.NET MVC中使用DropDownList
鏈接:http://www.cnblogs.com/kirinboy/archive/2009/10/28/use-dropdownlist-in-asp-net-mvc.html
【編輯推薦】

















