详解ASP.NETMVC中DropDownList的使用

本文我们将讲解DropDownList的使用，这在ASP.NET MVC中算是比较常见的控件。该方法对于使用HtmlHelper比较方便。

成都网络公司-成都网站建设公司创新互联公司十余年经验成就非凡，专业从事网站设计制作、做网站，成都网页设计，成都网页制作，软文平台，广告投放平台等。十余年来已成功提供全面的成都网站建设方案，打造行业特色的成都网站建设案例，建站热线：028-86922220，我们期待您的来电！

在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：

 
 
 

  
  
  
 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 selectList,   
  
  
  
    string optionLabel,   
  
  
  
    IDictionary<string, object> htmlAttributes) {  
  
  
  
    …  
  
  
  
} 
 
 
 

如果没有指定selectList，该方法将自动绑定列表，即从ViewData中查找name所对应的值。如果提供了selectList，将自动绑定默认选项，即从selectList中找到Selected属性为true的SelectedListItem。（具体参见HtmlHelper方法的SelectInternal辅助方法）

例1：如果在Action方法中有如下代码：

 
 
 

  
  
  
List items = new List();  
  
  
  
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类型则绑定到下拉框中，否则将抛出InvalidOperationException。由于第二个SelectListItem的Selected为true，则默认选中第二个。

例2：如果Action中代码如下：

 
 
 

  
  
  
List items = new List();  
  
  
  
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)%> 
 
 
 

那么辅助方法将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。也就是说，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，并在ViewData或view model中指定其他与DropDownList同名的项作为默认选项。

最后让我们来回顾一下DropDownList的三种用法：

建立IEnumerable并在其中指定默认选中项。

建立IEnumerable，在单独的ViewData项或view model的属性中指定默认选中项。

使用SelectList。

好了，关于DropDownList的用法我们今天就讨论到这里，您会用了吗？