詳解ASP.NET MVC之下拉框綁定四種方式
前言
上兩節(jié)我們講了文件上傳的問(wèn)題,關(guān)于這個(gè)上傳的問(wèn)題還未結(jié)束,我也在花時(shí)間做做分割大文件處理以及顯示進(jìn)度的問(wèn)題,到時(shí)完成的話(huà)再發(fā)表,為了不耽誤學(xué)習(xí)MVC其他內(nèi)容的計(jì)劃,我們今天開(kāi)始好好講講關(guān)于MVC中下拉框中綁定枚舉的幾種方式。
話(huà)題引入
一般在下拉框中綁定數(shù)據(jù)的話(huà),分為幾種情況。
(1)下拉框中的數(shù)據(jù)是寫(xiě)死的,我們直接給出死代碼即可。
(2)下拉框中的數(shù)據(jù)從數(shù)據(jù)庫(kù)中讀取出來(lái),從而進(jìn)行顯示。
(3)下拉框中直接用枚舉顯示。
(4)下拉框中一個(gè)選擇的值改變另外一個(gè)下拉框中的值。
關(guān)于下拉框中綁定大概就是以上四種方式,接下來(lái)我們一一來(lái)破解,我們樣式利用Bootstrap來(lái)表示,順便也溫習(xí)溫習(xí)Bootstrap。
下拉框硬編碼【一】
我們?cè)诳刂破髦薪o出如下數(shù)據(jù)并利用ViewBag來(lái)進(jìn)行傳遞
ViewBag.hard_value = new List<SelectListItem>() { new SelectListItem(){Value="0",Text="xpy0928"}, new SelectListItem(){Value="1",Text="cnblogs"} };
在數(shù)據(jù)中進(jìn)行如下綁定
@Html.DropDownList("hard-code-dropdownlist", new SelectList(ViewBag.hard_value, "Value", "Text"), new { @class = "btn btn-success dropdown-toggle form-control" })
下面我們來(lái)看看效果:
下拉框讀取數(shù)據(jù)庫(kù)【二】
這個(gè)要讀取數(shù)據(jù)庫(kù),我們就給出一個(gè)類(lèi)測(cè)試就ok,并給出默認(rèn)選中值,測(cè)試類(lèi):
public class BlogCategory { public int CategoryId { get; set; } public string CategoryName { get; set; } }
綁定ViewBag傳值:
//從數(shù)據(jù)庫(kù)中讀取 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 需要進(jìn)行轉(zhuǎn)換否則出現(xiàn)如下錯(cuò)誤:
CS1973: “System.Web.Mvc.HtmlHelper<dynamic>”沒(méi)有名為“DropDownList”的適用方法,但似乎有一個(gè)具有該名稱(chēng)的擴(kuò)展方法。擴(kuò)展方法不能進(jìn)行動(dòng)態(tài)調(diào)度。請(qǐng)考慮強(qiáng)制轉(zhuǎn)換動(dòng)態(tài)參數(shù),或調(diào)用該擴(kuò)展方法但不使用擴(kuò)展方法語(yǔ)法。
下拉框綁定枚舉【三】(一)
我們同樣給出一個(gè)測(cè)試類(lèi):
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ù)看看成果:
下拉框綁定枚舉【三】(二)
利用擴(kuò)展方法 @Html.EnumDropDownListFor 來(lái)實(shí)現(xiàn)。接下來(lái)依次給出兩個(gè)類(lèi)來(lái)進(jìn)行演示:
public class StudentModel { [Display(Name = "語(yǔ)言")] 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 }
在視圖中進(jìn)行綁定:
<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>
我們看看結(jié)果
下拉框選擇則另一個(gè)下拉框?qū)?yīng)改變 【四】
此例最合適的例子莫過(guò)于省市選擇的案例。我們一起來(lái)看看。
(1)所屬省、市一級(jí)雇員類(lèi)。
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)系號(hào)碼")] 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="岳陽(yáng)市",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>注冊(cè)雇員</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)); }); } }); }
我們來(lái)看看整個(gè)過(guò)程:
結(jié)語(yǔ)
對(duì)于下拉框綁定基本上已全部囊括進(jìn)去,以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ASP.NET?MVC實(shí)現(xiàn)多選下拉框
- 詳解ASP.NET MVC 下拉框的傳值的兩種方式
- ASP .NET 可編輯輸入自動(dòng)匹配的下拉框
- ASP.NET MVC下拉框聯(lián)動(dòng)實(shí)例解析
- ASP.NET中DropDownList下拉框列表控件綁定數(shù)據(jù)的4種方法
- ASP.NET實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- ASP.NET多彩下拉框開(kāi)發(fā)實(shí)例
- asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
- asp.net中js+jquery添加下拉框值和后臺(tái)獲取示例
- asp.net 實(shí)現(xiàn)下拉框只讀功能
- ASP.NET?MVC下拉框中顯示枚舉項(xiàng)
相關(guān)文章
ASP.NET?Core在WebApi項(xiàng)目中使用Cookie
這篇文章介紹了ASP.NET?Core在WebApi項(xiàng)目中使用Cookie的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03ASP.NET MVC分頁(yè)和排序功能實(shí)現(xiàn)
這篇文章主要介紹了MVC學(xué)習(xí)系列之分頁(yè)和排序功能實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07ASP.NET導(dǎo)出數(shù)據(jù)到Excel的實(shí)現(xiàn)方法
在做asp.net程序時(shí)涉及到數(shù)據(jù)顯示的時(shí)候多數(shù)會(huì)要求打印,而網(wǎng)頁(yè)上的打印格式往往又不能滿(mǎn)足需求,經(jīng)常用的方法就是導(dǎo)入到Excel以后再進(jìn)行打印。(仿佛這已經(jīng)是老生常談)今天在網(wǎng)上搜了一段打印的代碼,覺(jué)得不錯(cuò),需要打印的朋友可以看看。2013-07-07VS2015 搭建Asp.net core開(kāi)發(fā)環(huán)境的方法
最近想在vs2015體驗(yàn)下.net core,折騰了兩天終于把環(huán)境弄好了。下面這篇文章就給大家分享下我的搭建過(guò)程,有需要的朋友們可以參考學(xué)習(xí),下面來(lái)一起看看吧。2016-12-12.Net學(xué)習(xí)筆記之Layui多圖片上傳功能
這篇文章主要給大家介紹了關(guān)于.Net學(xué)習(xí)筆記之Layui多圖片上傳功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用.Net具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07在.ashx文件中獲取cookies值實(shí)現(xiàn)代碼
.ashx文件中獲取cookies值對(duì)于一些高手們就不多說(shuō)了,至于一些小白們還是有必要多多學(xué)習(xí)啊,好了話(huà)不多說(shuō),看代碼,感興趣的你可不要錯(cuò)過(guò)了哈2013-02-02ASP.NET性能優(yōu)化之讓瀏覽器緩存動(dòng)態(tài)網(wǎng)頁(yè)的方法
上一篇《ASP.NET性能優(yōu)化之構(gòu)建自定義文件緩存》我們通過(guò)OutputCache,讓請(qǐng)求去訪(fǎng)問(wèn)服務(wù)器asp.net的輸出緩存,我們擴(kuò)展了OutputCacheProvider,這相當(dāng)于是訪(fǎng)問(wèn)服務(wù)器上的靜態(tài)資源。2011-09-09