详细说明ASP中绑定MVC下拉框的四种方式 网

序

在上两节中，我们讨论了文件上传的问题。上传的问题还没有结束。我也在花时间做分割大文件和显示进度的处理。完成后我会出版。为了不耽误学习MVC其他内容的计划，我们今天就从MVC下拉框中绑定枚举的几种方式开始讲。

主题介绍

通常，在下拉框中绑定数据时，有几种情况。

(1)下拉框中的数据写死了，我们可以直接给出死代码。

(2)从数据库中读取下拉框中的数据进行显示。

(3)通过枚举直接显示下拉框。

(4)下拉框中选定的值会改变另一个下拉框中的值。

关于下拉框中的绑定大概就是以上四种方式。接下来，我们将逐一破解。我们的风格是用Bootstrap来表达的，顺便也复习一下Bootstrap。

下拉框硬编码[I]

我们在控制器中给出以下数据，并使用ViewBag进行传输

view bag . hard _ Value=new ListSelectListItem(){ new SelectListItem(){ Value=' 0 '，Text='xpy0928'}，new SelectListItem(){Value='1 '，Text=' cnblogs ' } }按照以下方式绑定数据

复制了以下代码： @ html.dropdownlist('硬代码-dropdownlist '，新选择列表(viewbag.hard _ value，' value '，' text ')，新{ @ class=' btnbtn-success dropdownlist-switch form-control ' })

让我们来看看效果：

下拉框读取数据库[2]

为了读取数据库，我们将给出一个类测试作为ok，并给出默认的选择值，test class:

公共类BlogCategory { public int CategoryId { get；设置；}公共字符串CategoryName { get设置；}}将视图包绑定到传递值：

//从数据库中读取varcategorylist=new istblogcategory(){ new logcategory(){ categoryid=1，categoryname=' c #'}，new logcategory(){ categoryid=2。CategoryName='Java'}，new BlogCategory(){CategoryId=3，CategoryName='JavaScript'}，new BlogCategory(){CategoryId=4，CategoryName=' C ' } }var selectitemlist=newlistselectlistitem(){ new selectlistitem(){ value=' 0 '，text=' all '，Selected=true } }var selectList=new selectList(categoryList，' CategoryId '，' CategoryName ')；选择项目列表。添加范围(选择列表)；view bag . database=selectItemList；视图略有修改：

复制代码如下： @ html . dropdownlist(' database-dropdownlist '，view bag . database as ienumerableselectlistitem，new { @ class=' btnbtn-success dropdownlist-toggle form-control ' })

看效果：

需要转换ViewBag.database，否则会出现以下错误：

Cs1973:”系统。web.mvc.htmlhelperdynamic”没有名为“DropDownList”的适用方法，但似乎有一个同名的扩展方法。无法动态调度扩展方法。请考虑强制转换动态参数，或者在不使用扩展方法语法的情况下调用扩展方法。

下拉框绑定枚举[3] (1)

我们还提供了一个测试类：

公共枚举语言{中文、英语、日本、西班牙语、乌尔都语}获取枚举值并绑定：

ViewBag.from_enum=Enum。获取值(类型(语言))。CastLanguage()；该观点认为：

复制代码如下： @ html . dropdownlist(' database-dropdownlist '，new select list (viewbag。from _ enum)，新的{ @ class=' btnbtn-success drop down-switch form-control ' })

继续看结果：

下拉框绑定枚举[3] (2)

使用扩展方法@Html。EnumDropDownListFor来实现它。接下来，依次给出两个课程来演示：

公共类StudentModel { [Display(Name='语言)]公共程序语言{获取设置；} }公共枚举程序语言{[显示（名称='ASP .NET')] ASPNet，[Display(Name='C#).NET')] CSharp、[Display(Name='Java')] Java、[Display(Name=' Objective C ')]Objective C、[Display(Name='Visual Basic .NET')] VBNet、[Display(名称=' Visual data flex ')]VisualDataFlex、[Display(名称=' Visual Fortran ')]VisualFortran、[Display(名称=' Visual FoxPro ')]VisualFoxPro、[Display(名称=' Visual J ')]VisualJPlus }在视图中进行绑定：

div class='form-group' @Html .标签(型号=型号.语言，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .EnumDropDownListFor(model=model .语言，HTMl Attributes s 3360 new { @ class=' form-control ' })@ Html .ValidationMessageFor(model=model .语言'',新{ @ class=' text-danger ' })/div/div我们看看结果

下拉框选择则另一个下拉框对应改变【四】

此例最合适的例子莫过于省市选择的案例。我们一起来看看。

(1)所属省、市一级雇员类。

公共类省份{ public int provinceId { get设置；}公共字符串provinceName { get设置；}公共字符串缩写{获取设置；} }公共类城市{ public int CityId { get设置；}公共字符串CityName { get设置；} public int provinceId { get设置；} }公共类EmployeeId { get设置；}[必需，显示（名称='雇员名字)]公共字符串EmployeeName { get设置；}[必需，显示（名称='地址)]公共字符串地址{获取设置；}[必需，显示（名称='所属省)] public int省份{获取设置；}[必需，显示（名称='所在城市)]public int City { get；设置；}[显示（名称='地区代码)]public String ZipCode { get；设置；}[必需，显示（名称='联系号码)]公共字符串电话{ get设置；} }(2)初始化数据

列表省省列表=新列表省(){新省(){省Id=1，省名称='湖南缩写='湖南省' },新省(){provinceId=2，provinceName='广东缩写='广东省' },新省(){provinceId=3，provinceName='吉林缩写='吉林省' },新省(){provinceId=4，provinceName='黑龙江缩写='黑龙江省' } };以及绑定视图包到下拉框和控制器上的方法：

公共行动结果Create(){ viewpag .省列表=省列表变量模型=新员工();返回视图（模型);}[httpset]公共操作结果创建（员工模型){ if(模型状态)。IsValid) { }视图包.省列表=省列表返回视图（模型);}公共行动结果填写城市(int provincid){ var cities=new listfcity(){ new City(){ City id=10，CityName='岳阳市，provinceId=1}，new City(){CityId=10，CityName='深圳市，provinceId=2}，new City(){CityId=10，CityName='吉林市，provinceId=3}，new City(){CityId=10，CityName='哈尔滨市，provinceId=4 } }城市=城市。其中(s=s.provinceId==provinceId).to list()；返回Json(city，JsonRequestBehavior .允许get)；}(3)视图展示

@使用(Html .begin inform()){ @ Html .反伪造token()div=' form-横置' H4注册雇员/h4 div class='form-group' @Html .LabelFor(m=m.EmployeeName，new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .TextBoxFor(m=m.EmployeeName，new { @ class=' form-control ' })@ Html .validationmessageFOr(m=m . EmployeeName ' '，new { @ class=' text-danger ' })/div/div class=' form-group ' @ Html .LabelFor(m=m.Address，new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .TextBoxFor(m=m.Address，new { @ class=' form-control ' })@ Html .ValidationMessageFor(m=m . Address ' '，new { @ class=' text-danger ' })/div/div class=' form-group ' @ Html .LabelFor(m=m。省份，新{ @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .DropDownListFor(m=m。省份，新选择列表（视图包ProvinceList，' provinceId '，' provinceName ')，'选择所在省，new { @class='form-control '，@onchange='FillCity()' }) @Html .ValidationMessageFor(m=m。省份'，new { @ class=' text-danger ' })/div/div class=' form-group ' @ Html .LabelFor(m=m.City，new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .下拉列表(m=m.City，new SelectList(可枚举EmptySelectListItem()，' CityId '，' CityName ')，'选择所在市，new { @ class=' form-control ' })@ Html .ValidationMessageFor(m=m.City，'，new { @ class=' text-danger ' })/div/div class=' form-group ' @ Html .LabelFor(m=m.ZipCode，HTMl属性3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .TextBoxFor(m=m.ZipCode，new { @ class=' form-control ' })@ Html .validationmessageFOr(m=m . ZipCode ' '，new { @ class=' text-danger ' })/div/div class=' form-group ' @ Html .LabelFor(m=m.Phone，new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .TextBoxFor(m=m.Phone，new { @ class=' form-control ' })@ Html .ValidationMessageFor(m=m.Phone，'，new { @ class=' text-danger ' })/div/div class=' form-group ' div class=' col-MD-offset-2 col-MD-10 '输入类型='提交'值=' Create ' class=' BTN BTN-成功'/a href='/Home/Employees ' class=' BTN BTN-警告' cancel/a/div/div }(4)根据省下拉框选择到市下拉框脚本

函数填充城市(){ var provinceId=$(' #省份')。val()；$.ajax({ url: '/Home/FillCity '，type: 'GET '，dataType: 'JSON '，data : { ProvinCe id : ProvinCe id }，success:函数(城市){ $(' # City ').html(" ")；$.每个（城市，功能(I，city) { $('#City ').追加($("选项/选项")。瓦尔（城市CityId ).html(城市城市名称))；});} });}我们来看看整个过程：

结语

对于下拉框绑定基本上已全部囊括进去，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。