ASP.NET MVC中使用DropDownList_DropDownList绑定数据
2016-12-19 13:13:34  By: dwtedx

在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();
}


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;

//View代码
<%=Html.DropDownList("list")%>



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

最后让我们来回顾一下DropDownList的三种用法:建立IEnumerable<SelectListItem>并在其中指定默认选中项、建立IEnumerable<SelectListItem>、在单独的ViewData项或view model的属性中指定默认选中项、使用SelectList


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+