ASP.NET MVC中怎么實(shí)現(xiàn)下拉框綁定，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(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ù)

下拉框硬編碼【一】

我們?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)行如下綁定

復(fù)制代碼 代碼如下:

 @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è)類測(cè)試就ok，并給出默認(rèn)選中值，測(cè)試類：

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;

視圖稍加修改：

復(fù)制代碼 代碼如下:

@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è)具有該名稱的擴(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è)試類：

public enum Language
  {
   Chinese,
   English,
   Japan,
   Spanish,
   Urdu
  }

獲取枚舉值并綁定：

 ViewBag.from_enum = Enum.GetValues(typeof(Language)).Cast<Language>();

視圖給出：

復(fù)制代碼 代碼如下:

@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)進(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í)雇員類。

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">
   <h5>注冊(cè)雇員</h5>
   <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ò)程：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

名稱欄目：ASP.NETMVC中怎么實(shí)現(xiàn)下拉框綁定-創(chuàng)新互聯(lián)
文章源于：http://aaarwkj.com/article48/jsjep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計(jì)公司、小程序開(kāi)發(fā)、ChatGPT、自適應(yīng)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)