详解ASP.NET MVC中DropDownList的使用

转载 2011年01月12日 01:38:00

  • 在这里我们将介绍ASP.NET MVC中DropDownList的使用,希望能对大家了解ASP.NET MVC模式有所帮助。

 

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

在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辅助方法)

也就是说

  1. public ActionResult Test()  
  2. {  
  3.     ViewData["Name"] = "Jade";  
  4.     return View();  
  5. }  
  6. <%= Html.TextBox("Name")%> 

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

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

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

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

如果ViewData和ViewData.Model中同时存在Name,则优先使用ViewData中的项。

CheckBox、Hidden、Password、RedioButton等控件也是如此,它们与TextBox一样都使用input标记,属性绑定的规则大致相同。

DropDownList则与TextBox等控件不同,它使用的是select标记。它需要两个值:在下拉框中显示的列表,和默认选项。而自动绑定一次只能绑定一个属性,因此你需要根据需要选择是绑定列表,还是默认选项。

DropDownList扩展方法的各个重载版本“基本上”都会传递到这个方法上:

  1. public static string DropDownList(this HtmlHelper htmlHelper,   
  2.     string name,   
  3.     IEnumerable<SelectListItem> selectList,   
  4.     string optionLabel,   
  5.     IDictionary<stringobject> htmlAttributes) {  
  6.     …  

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

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

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

在View中这样使用:

<%=Html.DropDownList("list")%>那么辅助方法将率先从ViewData中获取key为list的项,如果该项为IEnumerable<SelectedListItem>类型则绑定到下拉框中,否则将抛出InvalidOperationException。由于第二个SelectListItem的Selected为true,则默认选中第二个。

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

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

View中的代码如下:

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

那么辅助方法将ViewData["list"]绑定为下拉框,然后从ViewData中获取key为selected的项,并将下list中Value值与该项的值相等的SelecteListItem设为默认选中项。

以上两种方法尽管可以实现DropDownList的正确显示,但并非最佳实践。在实际项目中,我们更希望在代码中使用强类型。例如上面两例中,SelectListItem的Text和Value本来是User对象的Name和Age属性,然而上面的代码却丝毫体现不出这种对应关系。如果User列表是从数据库或其他外部资源中获得的,我们难道要用这样的方式来绑定吗?

  1. var users = GetUsers();  
  2. foreach (var user in users)  
  3. {  
  4.     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的构造函数如下所示:

  1. public SelectList(IEnumerable items, string dataValueField, string dataTextField, object selectedValue)  
  2.     : base(items, dataValueField, dataTextField, ToEnumerable(selectedValue)) {  
  3.     SelectedValue = selectedValue;  

于是我们的代码变为:

  1. var users = GetUsers();  
  2. var selectList = new SelectList(users, "Age""Name""24");  
  3. this.ViewData["list"] = selectList;  
  4. <%=Html.DropDownList("list")%> 

当然,你也可以使用不带selectedValue参数的构造函数重载,而在view中显式指定IEnumerable<SelectListItem>,并在ViewData或view model中指定其他与DropDownList同名的项作为默认选项。

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

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

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

使用SelectList。

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

原文标题:在ASP.NET MVC中使用DropDownList

链接:http://www.cnblogs.com/kirinboy/archive/2009/10/28/use-dropdownlist-in-asp-net-mvc.html

【编辑推荐】

原文链接: http://developer.51cto.com/art/200910/159507.htm

[Asp.Net]4种方法把数据绑定到Dropdownlist

第一种,把Array数组绑到dropdownlist 程序代码string[] Month =new string[7]{ "January", "February", "March", "April...
  • david_520042
  • david_520042
  • 2015年04月28日 19:12
  • 2466

【.net基础】--DropDownList控件:两级联动

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等。以前只知道有这样的页面效果,但是对这些控件了解并不多。不怕不知道,就怕不知道。...
  • successA
  • successA
  • 2015年05月11日 16:45
  • 1662

asp.net中DropDownList控件各种属性研究汇总

.aspx代码如下: AutoPostBack="True" > ...
  • yayun0516
  • yayun0516
  • 2014年12月08日 10:02
  • 1754

asp.net js实现dropdownlist二级联动(动态)

ASPX端代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/...
  • lishimin1012
  • lishimin1012
  • 2014年06月26日 21:06
  • 3195

两种添加数据到dropdownlist控件的方法_asp.net技巧

给dropdownlist添加数据
  • u011069590
  • u011069590
  • 2015年09月10日 09:43
  • 1487

.net mvc DropDownList 下拉框_无限级分类

1、数据库设计: id:int  name:string pid:int  //父级id(顶级菜单默认为0) 2、Controller: using System; using System.Coll...
  • yan309271291
  • yan309271291
  • 2014年12月27日 16:26
  • 1776

asp DropDownList下拉列表的使用(转)

下拉列表也是Web开发中常用的控件之一,用来从一组可选项中选取一项。FineUI中的下拉列表不仅可以通过ASPX标签声明,也可以绑定到各种数据源。FineUI还根据实际项目的需要,扩展了一种模拟树的下...
  • langjian2012
  • langjian2012
  • 2014年03月06日 16:56
  • 2255

ASP.NET中DropDownList控件的简单使用--DDL绑定数据库表中值,选择DDL中值直接检索数据

这篇博客主要说一下DropDownList绑定数据库表中数据,及选择相应DropDownList表中的值会根据此值从数据库中查询相应的数据信息。       一、简单介绍一下我要实现的功能...
  • u010075060
  • u010075060
  • 2015年04月23日 22:18
  • 2207

ASP.NET中DropDownList控件的简单使用--DDL绑定数据库表中值,选择DDL中值直接检索数据

这篇博客主要说一下DropDownList绑定数据库表中数据,及选择相应DropDownList表中的值会根据此值从数据库中查询相应的数据信息。       一、简单介绍一下我要实现的功能   ...
  • mazhaojuan
  • mazhaojuan
  • 2013年01月22日 14:59
  • 15142

后台读取前台下拉框选项值(DropDownList)

纠结于到底是原创还是转载,考虑再三,还是xuanz
  • dd_zhouqian
  • dd_zhouqian
  • 2014年08月19日 17:28
  • 9731
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:详解ASP.NET MVC中DropDownList的使用
举报原因:
原因补充:

(最多只允许输入30个字)