在ASP.NET MVC中使用DropDownList

在ASP.NET MVC中,尽管咱们能够直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法仍是使用HtmlHelper中的辅助方法。在View中,包含一个类型为HtmlHelper的属性Html,它为咱们呈现控件提供了捷径。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辅助方法)this

也就是说spa

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

 

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

这样的代码将会输出这样的HTML:code

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

 

因为TextBox的id和name属性的值与ViewData中的某一项同名(均为Name),所以TextBox的value属性的值将自动绑定为ViewData中Name项的值。不只是ViewData,若是view model的类型包含Name属性,也将输出一样的结果:htm

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。
相关文章
相关标签/搜索