当前位置: 首页 > 编程日记 > 正文

详解Asp.net MVC DropDownLists

来自网络:


Asp.net MVC中的DropDownLists貌似会让一开始从Asp.net Forms转过来的程序员造成不少迷惑.这篇文章讲述了为了使用DropDownLists,你需要在Asp.Net MVC中知道的方方面面.

DropDownList,ComboBox,无论你喜欢怎么称呼这些,他们毫无例外的会被生成为html select标签.在<select>开标签和</select>闭标签之间,每一个列表元素都必须被包裹于<option>标签.当然你也可以使用<optgroup>标签将各个选项按逻辑上分成不同的组。如果针对<option>设置了value属性,则Value属性就是在form提交时select元素的值.而如果忘了给value属性赋值,则在<option></option>标签内包裹的内容则是被提交的值。

为了简便起见,这里我先用一个静态的列表作为例子,你可以将这些作为html直接加入到你的View中:

<select name="year">
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
</select>

或者,给列表加点小动态,假如需要列表的年份会随着新年到来之际自动往后推1年:

<select name="year">
<option><%= DateTime.Now.Year %></option>
<option><%= DateTime.Now.AddYears(1).Year %></option>
<option><%= DateTime.Now.AddYears(2).Year %></option>
<option><%= DateTime.Now.AddYears(3).Year %></option>
<option><%= DateTime.Now.AddYears(4).Year %></option>
<option><%= DateTime.Now.AddYears(5).Year %></option>
</select>
 

甚至可以更简便:

<select name="year">
<% for (var i = 0; i < 6; i++){%>
<option><%= DateTime.Now.AddYears(i).Year %></option>
<%}%>
</select>

上面三个代码段生成效果相同,如下:

mvcselect1.gif

如果的数据是来自数据库,那最好还是使用Html.DropDownList()扩展方法的八个重载方法来创建DropDownList.在这里我并不会一一说明这些不同的重载,但是会说明主要重载。第一种重载-public static string DropDownList(this HtmlHelper htmlHelper, string name)-仅仅接受一个string类型的参数.帮助文档中只是简单说明了这个string参数是<select>的name属性是远远不够的,这个参数不仅是<select>元素的name和id的值,还用于在ViewData查找元素,如果这个string参数和ViewData的key相匹配,ViewData元素会和helper进行绑定来创建<option>,同时,ViewData元素的类型必须是SelectListItems的集合.下面代码是使用LINQ TOSQL来从Northwind数据库中提取种类,使用DropDownList扩展方法的第一个重载:

public ActionResult Index()
{
var db = new NorthwindDataContext();
IEnumerable<SelectListItem> items = db.Categories
.Select(c => new SelectListItem
{
Value = c.CategoryID.ToString(),
Text = c.CategoryName
});
ViewData["CategoryID"] = items;
return View();
}

注意每一个SelectListItem对象都必须给Value和Text属性进行赋值。他们会在运行时分别匹配到html的<option>的value属性和<option></option>之间的内容。注意这里ViewData的key用“CategoryID”显得有点奇怪,但实际上CategoryID正式<select>向服务器提交的值,所以使用这样的命名是有实际意义的。在View中,使用重载方法:

<%= Html.DropDownList("CategoryID") %>

而对应生成的HTML如下:

<select id="CategoryID" name="CategoryID">
<option value="1">Beverages</option>
<option value="2">Condiments</option>
<option value="3">Confections</option>
<option value="4">Dairy Products</option>
<option value="5">Grains/Cereals</option>
<option value="6">Meat/Poultry</option>
<option value="7">Produce</option>
<option value="8">Seafood</option>
</select>

Html.DropDownList的第二种重载方法-public static string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList)-是经常被使用的。在这个重载中,你可以使用IEnumerable<SelectListItem>或者SelectList对象作为参数。首先再看返回上述两个对象的方法之前,先看在View中的代码:

<%= Html.DropDownList("CategoryID", (IEnumerable<SelectListItem>) ViewData["Categories"]) %>

我们先说存入ViewData的第一种对象类型-IEnumerable<SelectListItem>对象,代码和前面的例子很像:

public ActionResult Index()
{
var db = new NorthwindDataContext();
IEnumerable<SelectListItem> items = db.Categories
.Select(c => new SelectListItem
{
Value = c.CategoryID.ToString(),
Text = c.CategoryName
});
ViewData["Categories"] = items;
return View();
}

再看在ViewData中存入SelectList类型的代码:

public ActionResult Index()
{
var db = new NorthwindDataContext();
var query = db.Categories.Select(c => new { c.CategoryID, c.CategoryName });
ViewData["Categories"] = new SelectList(query.AsEnumerable(), "CategoryID", "CategoryName");
return View();
}

mvcselect2.gif

使用SelectList使Controller中的代码稍微整洁了一些,当然在View中也同样。SelectList的构造函数有好几个重载可以接受对象作为参数来代表被选择的选项:

public ActionResult Index()
{
var db = new NorthwindDataContext();
var query = db.Categories.Select(c => new { c.CategoryID, c.CategoryName });
ViewData["Categories"] = new SelectList(query.AsEnumerable(), "CategoryID", "CategoryName", 3);
return View();
}

上面代码会让”Confections”在列表生成后被选中:

mvcselect4.gif

默认值

上面所有例子都会在页面载入后默认选择第一个选项,但很多情况下,需要一个默认值来代替第一个值被选择,这个默认值可以是空或者是提示用户”请选择”,或者类似的。DropDownList还有一个重载可以实现这点-publicstatic string DropDownList(this HtmlHelper htmlHelper, string name,IEnumerable<SelectListItem> selectList, string optionLabel).

<%= Html.DropDownList("CategoryID", (SelectList) ViewData["Categories"], "--Select One--") %>


mvcselect3.gif

CSS和HTML属性

DropDownList有四个重载可以在DropDownList被生成后添加HTML属性.其中有两个接受IDictionary<string,object>作为参数,而另外两个以匿名对象作为参数。下面两段代码生成相同的html,都添加CSS选择符和绑定客户端onchange()事件:

<%= Html.DropDownList(
"CategoryID",
(SelectList)ViewData["Categories"],
"--Select One--",
new Dictionary<string, object>
{
{"class", "myCssClass"},
{"onchange", "someFunction();"}
}) %>

                      
<%=Html.DropDownList(
"CategoryID",
(SelectList) ViewData["Categories"],
"--Select One--",
new{
@class = "myCssClass",
onchange = "someFunction();"
}) %>

你也许已经注意到了第二段代码中有个叫@class的属性,它还是会被生成为”class”但class是C#的关键字所以需要在属性名前加上”@”,你也许还会想为什么需要两个不同的重载来实现为html添加标签?第二段代码中使用匿名方法显得代码更简洁和优美,当然选择第二段的写法。但是HTML5的说明中提到可以动态的为html元素添加自定义属性,而自定义属性必须以“data-”作为开头,而如果你尝试在C#对象中创建的属性名中有连字符(译者注:也就是”-”),就会产程编译错误,所以Dictionary<string, object>作为参数就能很好的解决这个问题。

AutoPostBack哪去了?

从前使用webForm开发的程序员经常会问到AutoPostBack跑哪去了?使用IDE,并且在AutoPostBack打个勾是非常容易的。而正是因为容易使用,所以大多开发人员不会去想AutoPostBack是怎样的机制。实际上,如果你选择AutoPostBack,则DropDownList会被添加一个引发javascript事件的onchange属性,导致DropDownList所在的form被提交。这个过程在MVC中必须手动实现,但是也非常简单,我下面的代码用两种方式实现这点,第一段代码中的方式通过object作为参数来设置html的属性,另一段代码使用jQuery来实现同样的效果。毫不谦虚的说,我已经将DropDownList在form中的大部使用都写出来了,下面是第一种方法:

<% using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "TheForm" })){%>
<%= Html.DropDownList(
"CategoryID",
(SelectList) ViewData["Categories"],
"--Select One--",
new{
onchange = "document.getElementById('TheForm').submit();"
})%>
<%}%>

下面是使用jQuery的方法

<script type="text/javascript">
$(function() {
$("#CategoryID").change(function() {
$('#TheForm').submit();
});
});
</script>

<%using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "TheForm" })){%>
<%=Html.DropDownList("CategoryID", (SelectList) ViewData["Categories"], "--Select One--") %>
<%}%>

提示

在HtmlHelper中并没有提供为DropDownList添加提示的重载,提示是通过设置<option>中的title属性来实现的,当然你可以实现自己的HtmlHelper来通过列表为每个title赋上相应的值,但是这有点麻烦。却而代之的是,你可以使用jQuery来很容易的实现这点:

<script type="text/javascript">
$(function() {
$("#CategoryID option").each(function() {
$(this).attr({'title': $(this).html()});
});
});
</script>

mvcselect5.gif

转载于:https://www.cnblogs.com/lujq/archive/2010/04/07/1706645.html

相关文章:

3D中的OBJ文件格式详解(转载)

OBJ文件是Alias|Wavefront公司为它的一套基于工作站的3D建模和动画软件"Advanced Visualizer"开发的一种标准3D模型文件格式&#xff0c;很适合用于3D软件模型之间的互导&#xff0c;也可以通过Maya读写。比如你在3dsMax或LightWave中建了一个模型&#xff0c;想把它…

比特币测试网络搭建

转自 https://blog.csdn.net/yzpbright/article/details/81004202 比特币 一、安装 Docker 二、安装和运行比特币测试网络(bitcoin-testnet) 1.下载比特币测试网络(bitcoin-testnet)的Docker镜像 docker pull freewil/bitcoin-testnet-box 2.运行Docker镜像 docker run -t -i -…

1136 A Delayed Palindrome 需再做

注意点&#xff1a; 1. 大整数即高精度整数&#xff0c;数据结构bign要会定义 2. 记得写构造函数或者通过别的方式初始化bign 3. len属性记得手动更新 4. int d[maxn]数组是顺位存储&#xff0c;意味着字符串要逆序读入 AC代码 #include<cstdio> #include<iostr…

ES5-Array-push(),pop(),shift(),unshift()

参考文章&#xff1a;push()&#xff0c;pop() push方法用于在数组的末端添加一个或多个元素&#xff0c;并返回添加新元素后的数组长度。 注意&#xff0c;该方法会改变原数组&#xff0c;而不是创建一个新的数组。var arr [];arr.push(1) // 1 arr.push(a) // 2 arr.push(tr…

visual studio 2005 新建C++空项目无法调试的解决方案

(1)项目属性→配置属性→链接器从→调试→生成调试信息→将“否”改为“是(/DEBUG)”。(2)项目属性→配置属性→C/C→调试信息格式→将“禁用”改为“用于编辑并继续的程序数据库(/ZI)”。(3)项目属性→配置属性→C/C→优化→优化→将“最大化速度(/O2)”改为“禁用(/Od)”。转…

jQuery.append()、jQuery.html()存在的XSS漏洞

使用jQuery.append()、jQuery.html()方法时&#xff0c;如果其中内容包含<script>脚本而没有经过任何处理的话&#xff0c;会执行它。 简单的示例代码如下&#xff1a; 1 var xssStr <script>console.log(1)</script>; 2 $(#test).html(xssStr); 控制台会打…

1132 Cut Integer

注意&#xff1a;取余得到的后半段b可能为0&#xff0c;所以要预先判断&#xff0c;否则会出现浮点错误。 写成 if(b!0&&z%(a*b)0)是不能避免浮点错误的&#xff0c;因为z%(a*b)已经发生。需要更换两个条件的位置&#xff0c;把前提放在前面&#xff0c;即 if(b!0&am…

.net之工作流工程展示及代码分享(二)工作流引擎

在介绍完表单类的时候&#xff0c;接下来介绍工作流引擎&#xff0c;主要由四个类组成&#xff0c;分别是流程、流程步骤、流程实例、流程步骤实例类。 流程类&#xff1a; 1 [Serializable]2 public class Flow3 {4 [XmlAttribute]5 public Guid …

11.CCNA第十一天-配置OSPF/EIGRP(增强型内部网关协议)

配置OSPFBranch(config)#router ospf ?<1-65535> Process ID通配符掩码在IGP协议中&#xff0c;以连续的0和连续的1组成有一种不科学的称呼&#xff08;反掩码&#xff09;Branch#show running-config | section router ospfrouter ospf 10network 10.1.0.0 0.0.255.25…

Electio Time poj

第一次用结构体&#xff0c;写些自己的心得&#xff1a; #include<stdio.h> #include<algorithm> using namespace std; #define MAX 50000 struct COW //定义结构体&#xff0c;&#xff08;由于在cmp&#xff08;&#xff09;函数里需要用到结构体名&#xf…

浙江大学软件学院2020年保研上机模拟练习 7-3 Partial School Ranking

并查集的使用时注意&#xff1a; 1. 合并两个结点是 F[sa] sb 而不是 sb F[sa]&#xff0c;想一下含义。 2. 给每个结点赋予其自身为父节点时&#xff0c;要先判断它的父节点是不是0&#xff0c;也许已经有了。 我把照片里其他同学的成绩赋值为0&#xff0c;但是应该考虑到…

小米:开源不仅要站在巨人的肩膀上,还要为巨人指方向

今天上午&#xff0c;第一届小米开源技术峰会在北京举行&#xff0c;会上&#xff0c;小米人工智能与云平台副总裁崔宝秋致开场词&#xff0c;并发表了《小米开源之路》的演讲。 崔宝秋强调小米一直在推动开源&#xff0c;也是开源的倡导者。他告诉我们雷军创立小米的其中一个重…

微软企业库4.1学习笔记(七)创建对象 续集1

3.2使用Unity模块创建企业库对象 下面介绍如何使用前面的方法获取企业库对象的实例。代码示例如下 IUnityContainer containter newUnityContainer(); containter.AddNewExtension<EnterpriseLibraryCoreExtension>();首先创建一个Unity容器&#xff0c;并且添…

如何把 XML 文件显示为 HTML 表格

如何把 XML 文件显示为 HTML 表格 <html><head><script type"text/javascript">var xmlhttp; function loadXMLDoc(url){xmlhttpnull;if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc. xmlhttpnew XMLHttpRequest(); }else i…

浙江大学软件学院2020年保研上机模拟练习 7-2 Distance of Triples

思路一&#xff1a; 3个数组都按照小到大排序&#xff0c;设置3个指针&#xff0c;起始都在数组的末尾&#xff0c;如果1个指针向前移动1位可以让对应元素和另两个数组元素的距离之和减小&#xff0c;则移动它。如果某一回合三个指针都没动&#xff0c;就跳出循环。 非满分&a…

docker的分层

docker的分层 Contents docker的层docker的层是怎么来的docker是如何区分这些层 docker镜像是如何区分这些层的docker的层在本地的存储 vfsdevicemapperdocker的层 在这里&#xff0c;我们首先做一个样例&#xff0c;样例设定为一个镜像D。当然&#xff0c;这个D镜像不是单层&a…

《跟菜鸟学Cisco UC部署实战》-第 1 章 规划-课件(一共12章,免费)

链接:https://pan.baidu.com/s/1RiIphSUG5dsbPPqWaynHjQ 提取码:xjp9 复制这段内容后打开百度网盘手机App,操作更方便哦 《跟菜鸟学Cisco UC部署实战》-视频课程http://edu.51cto.com/course/10031.html 《Skype for Business Server 2015-企业外部-部署》视频课程http://ed…

UpdateDate()函数的作用

UpdateData(true); 用窗体上控件中的内容来更新和控件相关连的变量的值&#xff08;只能更新value类型的变量&#xff09; 例如&#xff1a;你在你的窗体中有一个Edit控件&#xff0c;为这个控件关联了CString类型的变量m_strName; 你在控件中添入内容之后&#xf…

1021 Deepest Root

要解决两大问题&#xff1a; 1. 数包含几个连通分量 2. 如何找到最深结点 注意&#xff1a;connected components的意思是连通分量 问题1我用并查集解决 问题2转化为如何得到每个结点的深度 值得注意之处是对于问题2来说&#xff0c;下图是测试用例1给出的树 可以看出从1…

一段处理百分数的js代码

function percent(s, e, i){s Number(s), isNaN(s) && (s "0");var n "%";return e !1 && (n ""), parseFloat((100 * s).toFixed(i)) n } s 需要处理的数字 e 是否显示百分号(%) true 或 false i 保留几位小数 转载于:h…

js字符串如何倒序

1. var reverse function( str ){ var newStr , i str.length; for(; i > 0; i--) { newStr str.charAt(i); } return newStr; };reverse(abcde) 2. var reverse function( str ){ return str.split().reverse().join(); }; 3.&#xff08;类似法2&#xff09; var rev…

Windows Phone 7 Tip (4) -- User Agent

The user agent for IE on Windows Phone 7 running on the Asus Galaxy device is:Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0) Asus;Galaxy6 source转载于:https://www.cnblogs.com/midshipman/archive/2010/04/29/1723416.html

vs2010 学习Silverlight学习笔记(7):控件样式与模板

概要&#xff1a; 终于知道Silverlight——App.xaml是干什么用的了&#xff0c;不仅可以用来封装样式&#xff08;类似css&#xff09;&#xff0c;还可以制定控件模版。。。好强大的功能啊。 封装&#xff1a; 继续学习《一步一步学Silverlight 2系列&#xff08;8&#xff09…

MinGW-notepad++开发c/c++程序

下载MinGW 点击下载 安装好后运行 最后点击左上角的 Installation,开始安装 1.编译&#xff1a; g -o a.exe a.cpp gcc -o hello.exe hello.c 2.运行&#xff1a; ./a.exe 转载于:https://www.cnblogs.com/feilongblog/p/4315636.html

re:Invent大会第四天:为什么Lambda值得你更多关注?

2018年11月29日的拉斯维加斯&#xff0c;AWS re:Invent大会进入第四天&#xff0c;上午照例由AWS CTO Werner Vogels带来主题演讲。 从主题演讲之前到主题演讲之后&#xff0c;改变最大的产品毫无疑问就是Lambda&#xff0c;有至少8个相关的最新发布。Vogels在2014年正式对外发…

1145 Hashing - Average Search Time

目录 思路 样例解释 AC代码 思路 要做出这道题必须直到除留余数法和平方探测法的原理。 除此之外有两个注意点&#xff1a; 1. 在查找时&#xff0c;如果当前位置上不是要找的数会继续找下去(如果k没超过表长的话)&#xff0c;但是如果当前位置上是0&#xff0c;说明表里…

C#和Java的闭包-Jon谈《The Beauty of Closures》

第一段略。。。 大多数讲闭包的文章都是说函数式语言&#xff0c;因为它们往往对闭包的支持最完善。当你在使用函数式语言时&#xff0c;很可能已经清楚了解了什么是闭包&#xff0c;所以我想写一篇在经典OO语言出现的闭包有什么用处应该也是很合适的事情。这篇文章我准备讲一下…

谷歌浏览器输入框背景颜色变黄的解决方案

2019独角兽企业重金招聘Python工程师标准>>> input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow:0 0 0 60px #eee inset; -webkit-text-fill-color: #878787; } 转载于:https://my.oschina.net/kitty0107/blog/296…

男人最不该做的7件事

1.没有目标 2.浪费时间 3.不独立 4.被动地活着 5.不规划自己的人生 6.不学习吸收信息 7.不接受爱情转载于:https://www.cnblogs.com/jiu0821/p/4315660.html