ASP.NET MVC中怎么實(shí)現(xiàn)下拉框綁定,很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
創(chuàng)新互聯(lián)公司專注于龍勝企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。龍勝網(wǎng)站建設(shè)公司,為龍勝等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作,專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)下拉框硬編碼【一】
我們在控制器中給出如下數(shù)據(jù)并利用ViewBag來進(jìn)行傳遞
ViewBag.hard_value = new List() { new SelectListItem(){Value="0",Text="xpy0928"}, new SelectListItem(){Value="1",Text="cnblogs"} };
在數(shù)據(jù)中進(jìn)行如下綁定
復(fù)制代碼 代碼如下:
@Html.DropDownList("hard-code-dropdownlist", new SelectList(ViewBag.hard_value, "Value", "Text"), new { @class = "btn btn-success dropdown-toggle form-control" })
下面我們來看看效果:
下拉框讀取數(shù)據(jù)庫【二】
這個(gè)要讀取數(shù)據(jù)庫,我們就給出一個(gè)類測試就ok,并給出默認(rèn)選中值,測試類:
public class BlogCategory { public int CategoryId { get; set; } public string CategoryName { get; set; } }
綁定ViewBag傳值:
//從數(shù)據(jù)庫中讀取 var categoryList = new List() { 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 () { new SelectListItem(){Value="0",Text="全部",Selected=true} }; var selectList = new SelectList(categoryList, "CategoryId", "CategoryName"); selectItemList.AddRange(selectList); ViewBag.database = selectItemList;
視圖稍加修改:
復(fù)制代碼 代碼如下:
@Html.DropDownList("database-dropdownlist", ViewBag.database as IEnumerable
看看效果:
中 ViewBag.database 需要進(jìn)行轉(zhuǎn)換否則出現(xiàn)如下錯誤:
CS1973: “System.Web.Mvc.HtmlHelper
下拉框綁定枚舉【三】(一)
我們同樣給出一個(gè)測試類:
public enum Language { Chinese, English, Japan, Spanish, Urdu }
獲取枚舉值并綁定:
ViewBag.from_enum = Enum.GetValues(typeof(Language)).Cast();
視圖給出:
復(fù)制代碼 代碼如下:
@Html.DropDownList("database-dropdownlist", new SelectList(ViewBag.from_enum), new { @class = "btn btn-success dropdown-toggle form-control" })
繼續(xù)看看成果:
下拉框綁定枚舉【三】(二)
利用擴(kuò)展方法 @Html.EnumDropDownListFor 來實(shí)現(xiàn)。接下來依次給出兩個(gè)類來進(jì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 }
在視圖中進(jìn)行綁定:
@Html.LabelFor(model => model.Language, htmlAttributes: new { @class = "control-label col-md-2" })@Html.EnumDropDownListFor(model => model.Language, htmlAttributes: new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Language, "", new { @class = "text-danger" })
我們看看結(jié)果
下拉框選擇則另一個(gè)下拉框?qū)?yīng)改變 【四】
此例最合適的例子莫過于省市選擇的案例。我們一起來看看。
(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ù)
ListprovinceList = new List () { 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() { 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()}注冊雇員
@Html.LabelFor(m => m.EmployeeName, new { @class = "control-label col-md-2" })@Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.EmployeeName, "", new { @class = "text-danger" })@Html.LabelFor(m => m.Address, new { @class = "control-label col-md-2" })@Html.TextBoxFor(m => m.Address, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Address, "", new { @class = "text-danger" })@Html.LabelFor(m => m.Province, new { @class = "control-label col-md-2" })@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" })@Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })@Html.DropDownListFor(m => m.City, new SelectList(Enumerable.Empty(), "CityId", "CityName"), "選擇所在市", new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" }) @Html.LabelFor(m => m.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })@Html.TextBoxFor(m => m.ZipCode, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.ZipCode, "", new { @class = "text-danger" })@Html.LabelFor(m => m.Phone, new { @class = "control-label col-md-2" })@Html.TextBoxFor(m => m.Phone, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Phone, "", new { @class = "text-danger" })
(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( $('').val(city.CityId).html(city.CityName)); }); } }); }
我們來看看整個(gè)過程:
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,的支持。