詳解ASP.NET MVC之下拉框綁定四種方式
更新時間：2016年12月05日 14:17:24 作者：jeffckyWang
這篇文章主要介紹了詳解ASP.NET MVC之下拉框綁定四種方式，詳細的講訴了4種方法，具有一定的參考價值，有需要的可以了解一下。
前言
上兩節(jié)我們講了文件上傳的問題，關于這個上傳的問題還未結束，我也在花時間做做分割大文件處理以及顯示進度的問題，到時完成的話再發(fā)表，為了不耽誤學習MVC其他內容的計劃，我們今天開始好好講講關于MVC中下拉框中綁定枚舉的幾種方式。
話題引入
一般在下拉框中綁定數(shù)據(jù)的話，分為幾種情況。
（1）下拉框中的數(shù)據(jù)是寫死的，我們直接給出死代碼即可。
（2）下拉框中的數(shù)據(jù)從數(shù)據(jù)庫中讀取出來，從而進行顯示。
（3）下拉框中直接用枚舉顯示。
（4）下拉框中一個選擇的值改變另外一個下拉框中的值。
關于下拉框中綁定大概就是以上四種方式，接下來我們一一來破解，我們樣式利用Bootstrap來表示，順便也溫習溫習Bootstrap。
下拉框硬編碼【一】
我們在控制器中給出如下數(shù)據(jù)并利用ViewBag來進行傳遞
ViewBag.hard_value = new List<SelectListItem>() {
new SelectListItem(){Value="0",Text="xpy0928"},
new SelectListItem(){Value="1",Text="cnblogs"}
};
在數(shù)據(jù)中進行如下綁定
復制代碼 代碼如下:
@Html.DropDownList("hard-code-dropdownlist", new SelectList(ViewBag.hard_value, "Value", "Text"), new { @class = "btn btn-success dropdown-toggle form-control" })
下面我們來看看效果：
下拉框讀取數(shù)據(jù)庫【二】
這個要讀取數(shù)據(jù)庫，我們就給出一個類測試就ok，并給出默認選中值，測試類：
public class BlogCategory
{
public int CategoryId { get; set; }
public string CategoryName { get; set; }
}
綁定ViewBag傳值：
//從數(shù)據(jù)庫中讀取
var categoryList = new List<BlogCategory>() {
new BlogCategory(){CategoryId=1,CategoryName="C#"},
new BlogCategory(){CategoryId=2,CategoryName="Java"},
new BlogCategory(){CategoryId=3,CategoryName="JavaScript"},
new BlogCategory(){CategoryId=4,CategoryName="C"}
};
var selectItemList = new List<SelectListItem>() {
new SelectListItem(){Value="0",Text="全部",Selected=true}
};
var selectList = new SelectList(categoryList, "CategoryId", "CategoryName");
selectItemList.AddRange(selectList);
ViewBag.database = selectItemList;
視圖稍加修改：
復制代碼 代碼如下:
@Html.DropDownList("database-dropdownlist", ViewBag.database as IEnumerable<SelectListItem>, new { @class = "btn btn-success dropdown-toggle form-control" })
看看效果：
中 ViewBag.database 需要進行轉換否則出現(xiàn)如下錯誤：
CS1973: “System.Web.Mvc.HtmlHelper<dynamic>”沒有名為“DropDownList”的適用方法，但似乎有一個具有該名稱的擴展方法。擴展方法不能進行動態(tài)調度。請考慮強制轉換動態(tài)參數(shù)，或調用該擴展方法但不使用擴展方法語法。
下拉框綁定枚舉【三】（一）
我們同樣給出一個測試類：
public enum Language
{
Chinese,
English,
Japan,
Spanish,
Urdu
}
獲取枚舉值并綁定：
ViewBag.from_enum = Enum.GetValues(typeof(Language)).Cast<Language>();
視圖給出：
復制代碼 代碼如下:
@Html.DropDownList("database-dropdownlist", new SelectList(ViewBag.from_enum), new { @class = "btn btn-success dropdown-toggle form-control" })
繼續(xù)看看成果：
下拉框綁定枚舉【三】（二）
利用擴展方法 @Html.EnumDropDownListFor 來實現(xiàn)。接下來依次給出兩個類來進行演示：
public class StudentModel
{
[Display(Name = "語言")]
public ProgrammingLanguages Language { get; set; }
}
public enum ProgrammingLanguages
{
[Display(Name = "ASP.NET")]
ASPNet,
[Display(Name = "C# .NET")]
CSharp,
[Display(Name = "Java")]
Java,
[Display(Name = "Objective C")]
ObjectiveC,
[Display(Name = "Visual Basic .NET")]
VBNet,
[Display(Name = "Visual DataFlex")]
VisualDataFlex,
[Display(Name = "Visual Fortran")]
VisualFortran,
[Display(Name = "Visual FoxPro")]
VisualFoxPro,
[Display(Name = "Visual J++")]
VisualJPlus
}
在視圖中進行綁定：
<div class="form-group">
@Html.LabelFor(model => model.Language, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.Language, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Language, "", new { @class = "text-danger" })
</div>
</div>
我們看看結果
下拉框選擇則另一個下拉框對應改變 【四】
此例最合適的例子莫過于省市選擇的案例。我們一起來看看。
（1）所屬省、市一級雇員類。
public class Province
{
public int provinceId { get; set; }
public string provinceName { get; set; }
public string Abbr { get; set; }
}
public class City
{
public int CityId { get; set; }
public string CityName { get; set; }
public int provinceId { get; set; }
}
public class Employees
{
[Key]
public int EmployeeId { get; set; }
[Required, Display(Name = "雇員名字")]
public string EmployeeName { get; set; }
[Required, Display(Name = "地址")]
public String Address { get; set; }
[Required, Display(Name = "所屬省")]
public int Province { get; set; }
[Required, Display(Name = "所在城市")]
public int City { get; set; }
[Display(Name = "地區(qū)代碼")]
public String ZipCode { get; set; }
[Required, Display(Name = "聯(lián)系號碼")]
public String Phone { get; set; }
}
（2）初始化數(shù)據(jù)
List<Province> provinceList = new List<Province>() {
new Province(){provinceId=1,provinceName="湖南",Abbr="hunan_province"},
new Province(){provinceId=2,provinceName="廣東",Abbr="guangdong_province"},
new Province(){provinceId=3,provinceName="吉林",Abbr="jilin_province"},
new Province(){provinceId=4,provinceName="黑龍江",Abbr="heilongjiang_province"}
};
以及綁定ViewBag到下拉框和控制器上的方法：
[HttpGet]
public ActionResult Create()
{
ViewBag.ProvinceList = provinceList;
var model = new Employees();
return View(model);
}
[HttpPost]
public ActionResult Create(Employees model)
{
if (ModelState.IsValid)
{
}
ViewBag.ProvinceList = provinceList;
return View(model);
}
public ActionResult FillCity(int provinceId)
{
var cities = new List<City>() {
new City(){CityId=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}
};
cities = cities.Where(s => s.provinceId == provinceId).ToList();
return Json(cities, JsonRequestBehavior.AllowGet);
}
（3）視圖展示
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<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>
<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>
<div class="form-group">
@Html.LabelFor(m => m.Province, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.Province,
new SelectList(ViewBag.ProvinceList, "provinceId", "provinceName"),
"選擇所在省",
new { @class = "form-control", @onchange = "FillCity()" })
@Html.ValidationMessageFor(m => m.Province, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.City,
new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"),
"選擇所在市",
new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ZipCode, htmlAttributes: 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>
<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>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-success" />
<a href="/Home/Employees" class="btn btn-warning">Cancel</a>
</div>
</div>
</div>
}
（4）根據(jù)省下拉框選擇到市下拉框腳本
function FillCity() {
var provinceId = $('#Province').val();
$.ajax({
url: '/Home/FillCity',
type: "GET",
dataType: "JSON",
data: { provinceId: provinceId },
success: function (cities) {
$("#City").html("");
$.each(cities, function (i, city) {
$("#City").append(
$('<option></option>').val(city.CityId).html(city.CityName));
});
}
});
}
我們來看看整個過程：
結語
對于下拉框綁定基本上已全部囊括進去，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- ASP.NET?MVC實現(xiàn)多選下拉框
- 詳解ASP.NET MVC 下拉框的傳值的兩種方式
- ASP .NET 可編輯輸入自動匹配的下拉框
- ASP.NET MVC下拉框聯(lián)動實例解析
- ASP.NET中DropDownList下拉框列表控件綁定數(shù)據(jù)的4種方法
- ASP.NET實現(xiàn)級聯(lián)下拉框效果實例講解
- ASP.NET多彩下拉框開發(fā)實例
- asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
- asp.net中js+jquery添加下拉框值和后臺獲取示例
- asp.net 實現(xiàn)下拉框只讀功能
- ASP.NET?MVC下拉框中顯示枚舉項
相關文章
這篇文章主要介紹了asp.net+js實現(xiàn)批量編碼與解碼的方法,涉及前端的jquery post提交及后臺C#處理實現(xiàn)批量編碼與解碼的相關技巧,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了.net6?使用Senparc開發(fā)小程序配置,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
asp.net DataTable相關操作集錦(篩選,取前N條數(shù)據(jù),去重復行,獲取指定列數(shù)據(jù)等)
這篇文章主要介紹了asp.net DataTable相關操作,包括篩選,取前N條數(shù)據(jù),去重復行,獲取指定列數(shù)據(jù)等.基本涵蓋了DataTable的常見操作技巧,需要的朋友可以參考下2016-06-06
今天在cnblogs上看到有關注冊Javascript，主要是用到了ClientScript的三個方法。2008-07-07
把gridview的功能，整理了下，并給出了實例代碼，學習gridview的朋友必看的2008-09-09
控件開發(fā)時兩種JS嵌入資源方式的使用方法...2007-04-04
這篇文章主要為大家詳細介紹了mvc上傳到美橙云虛擬機系列問題的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
利用ASP.NET MVC+Bootstrap搭建個人博客之打造清新分頁Helper（三）
這篇文章主要介紹了利用ASP.NET MVC+Bootstrap搭建個人博客之打造清新分頁Helper（三）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了asp.net開發(fā)微信公眾平臺之驗證消息的真實性的相關資料,需要的朋友可以參考下2015-06-06
Visual Studio 2013如何使XML文件轉換成類
Visual Studio 2013如何使XML文件轉換成類？這篇文章主要介紹了Visual Studio2013輕松將你的XML文件轉換成類的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07