ASP.NET MVC中下拉列表的用法很简单,也很方便,具体来说,主要是页面上支持两种Html帮助类的方法:DropDownList()和DropDownListFor()。这篇博文主要作为个人的一个学习笔记,也为了方便很多初学Asp.Net Mvc的同学学习,因为当初自己初学的时候还是遇到了点小麻烦,所以希望能帮助初学者,老人们可跳过。

目录

下面具体看看这两个方法。

在具体分析这两个方法之前,先来看一下源代码截图:

从图中可以看到,今天要说的这两个方法都位于System.Web.Mvc.Html命名空间下的静态类SelectExtensions中,并且都是扩展了HtmlHelper类的静态方法,所以我们在使用了Rasor引擎的页面上可以直接使用@Html.DropDownList()语法,用起来非常爽!

DropDownList()方法

先来看看效果图,再看代码:

“数据库”下拉列表

先来说说这里的“数据库”下拉列表指的是下拉列表中的元素来自查询数据库中的结果集。

控制器中的逻辑代码如下:

var provinceList = _provinceAppService.GetProvinces(new ProvinceDto());//从应用服务层查询省份的结果集
var provinceSelectList = new SelectList(provinceList, "Code", "Name");
ViewData["provinceSelectList"] = provinceSelectList;

从上面的代码可以看出,查出结果集之后,就可以创建SelectList类的实例,这里SelectList的构造函数有好几个重载,这里只看一个,其他类似。SelectList的构造函数之一源码如下。根据类型和名称不难看出,第一个参数是实现了IEnumerable接口的变量,第二个参数对应的将来生成下拉列表的value属性的值,第三个参数对应的是Text的值,也就是下拉列表中显示的值。这里对于新手来说也许就有点难理解了。其实本质上,这里是一个数据绑定,也就是说,比如,我这里让以后生成的下拉列表的value的属性值为“Code”(省份编码)所对应的值,用图中的样子来说,就是北京的value="1",天津的value="2",,,,以此类推,因为省份数据表中的北京和天津的Code字段分别为1和2。不知道这样说,好理解吗?如果不好理解,来个图:

SelectList源码如下:

public SelectList(IEnumerable items, string dataValueField, string dataTextField)
: this(items, dataValueField, dataTextField, (object) null)
{
}

页面代码如下:

 <div class="margin-bottom-5">
@Html.DropDownList("province", ViewData["provinceSelectList"] as SelectList, "请选择省份", new { @class = "form-control input-small" })
</div>

DropDownList对应的源码为:

public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes)
{
return SelectExtensions.DropDownList(htmlHelper, name, selectList, optionLabel, (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
}

稍微解释一下源代码:

  • "this HtmlHelper htmlHelper"这是C#中扩展方法的写法,this关键字加类型名,这里表示扩展的是HtmlHelper类。
  • 第二个参数name表示的是生成的下拉列表的id和name的值。第三个表示的是可枚举的泛型集合,集合中的元素类型是SelectListItem,刚才我们在控制器中的SelectList类型符合条件,所以通过as将viewdata转换成SelectList。
  • 第三个optionLable是可选标签,就是如果没有选择时,要显示的内容,我这里是“请选择省份”。
  • 第四个参数htmlAttrbutes是一个对象类型的html特性,这里通过C#中的匿名类来给生成的下拉列表添加特性,比如我这里添加的class特性。

“硬编码”式下拉列表

先来看看效果图:

这里的下拉列表的数据都是硬编码到控制器的代码中。在代码的格式上稍微不同,但本质上是一样的。

控制器中的代码如下:

var statusSelectItems = new List<SelectListItem>
{
new SelectListItem{Text="失联",Value="0"},
new SelectListItem{Text="正常",Value="1"},
new SelectListItem{Text="维修",Value="2"},
new SelectListItem{Text="维护",Value="3"},
new SelectListItem{Text="下线",Value="4"},
new SelectListItem{Text="其他",Value="5"},
};
ViewData["statusSelect"] = new SelectList(statusSelectItems, "Value", "Text");

总之还是要创建一个SelectList的实例,构造函数必须传入一个IEnumerable的泛型集合,并且要知名绑定的字段。

我这里先是创建了一个IEnumerable的泛型集合,集合中的每一个元素都是SelectListItem类型,且都有两个字段Text和Value,它们的值实际上就是要显示到html生成的标签上的,所以在实例化SelectList时就直接绑定到"Value",和"Text"就可以了。

DropDownListFor()方法

接下来说说DropDownListFor()方法。

一般来说,该方法用于页面上有绑定模型之时,比如在产品的修改或者创建页面,我们都一般会绑定到一个模型,这里就会使用DropDownListFor()方法;而上面的DropDownList()方法一般用于页面没有绑定模型之时。

先来看效果图:

我这里是添加产品时,要选择产品的支付模式,有这么四种。

控制器代码的模样和上面一致:

var payPatternItems = new List<SelectListItem>
{
new SelectListItem{Text="投币",Value="0"},
new SelectListItem{Text="投币+扫码",Value="1"},
new SelectListItem{Text="仅扫码",Value="2"},
new SelectListItem{Text="免费",Value="3"},
};
var payPatternSelect = new SelectList(payPatternItems, "Value", "Text");

主要看看页面上的写法:

<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">
@Html.DisplayNameFor(tDto => tDto.Model)
</label>
<div class="col-md-8">
@Html.DropDownListFor(tDto => tDto.Model, ViewData["payPatternSelect"] as SelectList, "---请选择模式---", new { @class = "form-control" })
</div> </div>
</div>

@Html.DisplayNameFor会创建一个lable标签,可以看到DropDownListFor的后三个参数我们上面都说了,只是第一个不一样。其实,第一个参数的作用在于,当我们在选择下拉列表中的元素后,会将该元素所对应的value值绑定到页面模型上去,然后提交表单时,可以将该模型对象直接传递到相应的控制器的action中,这一点对于以前使用$.serilize()方法,再在后台一个个接收参数方便多了。

ASP.NET MVC 下拉列表使用小结的更多相关文章

  1. ASP.NET MVC 5入门小结

    1.前言        本人在读研究僧一只,老师那里使用的是ASP.NET的Web Forms技术,真的要感慨一句:尼玛太老旧了!之前耳闻Python的高效开发,曾经学过一点Python的Django ...

  2. asp.net mvc 下拉列表

    第一步:新建一个格式化下拉列表的公共类文件 using System; using System.Collections; using System.Collections.Generic; usin ...

  3. ASP.NET MVC 下拉列表实现

    https://blog.csdn.net/Ryan_laojiang/article/details/75349555?locationNum=10&fps=1 前言 我们今天开始好好讲讲关 ...

  4. ASP.NET MVC Model绑定小结

    Model绑定是指从URL提取数据,生成对应Action方法的参数这个过程.前面介绍的一系列Descriptor负责提供了控制器,行为方法和参数的元数据,ValueProvieder负责获取数据,剩下 ...

  5. ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text

    前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能.但是没有实现怎样获取下拉列表的value和text功能. 下面分别使用ng-click和ng-change来实 ...

  6. ASP.NET MVC ModelValidator小结

    当用户通过UI输入数据向程序交互时,都会出现一个潜在的错误,数据错误,要检查用户提交的数据是否正确,需要做数据验证,在ASP.NET MVC中,每当Action执行前都会对传入Action的Model ...

  7. 学习“迷你ASP.NET MVC框架”后的小结

    看蒋老师MVC的书第二个大收获可以是算是看了这个迷你ASP.NET MVC框架了,虽然它远不如真正ASP.NET MVC(下文简称“MVC”)那么复杂庞大,但在迷你版中绕来绕去也够呛的.这部分我看了几 ...

  8. ASP.NET MVC 5 05 - 视图

    PS: 唉,这篇随笔国庆(2015年)放假前几天开始的,放完假回来正好又赶上年底,公司各种破事儿. 这尼玛都写跨年了都,真服了.(=_=#) 好几次不想写了都. 可是又不想浪费这么多,狠不下心删除.没 ...

  9. 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  2. SQL Server开启READ_COMMITTED_SNAPSHOT

    --查询数据库状态 select name,user_access,user_access_desc,     snapshot_isolation_state,snapshot_isolation_ ...

  3. AIX系统程序异常不释放光驱处理

    AIX操作系统有时会出现程序异常不释放光驱,可以用以下命令进行处理: #fuser -kxuc /dev/cd0 或者 #fuser /dev/cd0 以上命令会列出访问光驱设备的所有进程,然后使用k ...

  4. Dictionary和IDictionary

    Dictionary<string> s = new Dictionary<string>(); 这个是s是Dictionary类型.是个类 类型,实现了接口,提供了更多的方法 ...

  5. linux系统各目录存储的文件类型

    /etc 存储各种配置文件 /etc/init.d/ 目录下包含许多系统各种服务的启动和停止脚本.具体可见:http://blog.csdn.net/gongweijiao/article/detai ...

  6. arcgis desktop按ctrl键后地图乱移的解决办法

    习惯使用快捷键的,经常会按下ctrl. 但在arcmap中,按下ctrl后,地图乱移.分析发现变为鼠标导航状态,也就是鼠标偏离地图中心,地图就会往鼠标所在方向移动. 解决办法:1. 以前按下esc键, ...

  7. VC++中操作XML(MFC、SDK)转

    [转]VC++中操作XML(MFC.SDK) XML在Win32程序方面应该没有在Web方面应用得多,很多Win32程序也只是用XML来存存配置信息而已,而且没有足够的好处的话还不如用ini.VC++ ...

  8. linux学习之——数据操作:添加与查询

    说明: 在linux系统中,利用搭建的服务器,编写两个页面,一个添加信息,一个展现信息: 主要涉及到:php+mysql的操作: 数据添加页面: <html> <head> & ...

  9. shell脚本实现数据库自动备份和删除备份

    为了安全起见,我们每天都需要备份数据库,但是备份数据库的时间往往是在凌晨左右,大家都休息,没人使用的时候,这样我们就需要linux系统实现自动备份,即定时自动执行脚本.但是我们又不能让所有的备份一直保 ...

  10. XML文件操作(C#)

    XML应用于Web开发的许多方面,常用于简化数据的存储和共享,它的设计宗旨是传输数据,而非显示数据.下面简单介绍一下C#是如何对XML文件进行读取的. 1.首先,建立XML对象并关联XML文件 str ...