ASP.NET MVC中怎么实现下拉框绑定
创始人
2024-11-28 06:24:32
0次

下拉框硬编码【一】

我们在控制器中给出如下数据并利用ViewBag来进行传递

   ViewBag.hard_value = new List() { 
    new SelectListItem(){Value="0",Text="xpy0928"},
    new SelectListItem(){Value="1",Text="cnblogs"}
   };

在数据中进行如下绑定

复制代码 代码如下:


 @Html.DropDownList("hard-code-dropdownlist", new SelectList(ViewBag.hard_value, "Value", "Text"), new { @class = "btn btn-success dropdown-toggle form-control" })

下面我们来看看效果:

ASP.NET MVC中怎么实现下拉框绑定

下拉框读取数据库【二】

这个要读取数据库,我们就给出一个类测试就ok,并给出默认选中值,测试类:

public class BlogCategory
  {
   public int CategoryId { get; set; }
   public string CategoryName { get; set; }

  }

绑定ViewBag传值:

//从数据库中读取
   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;

视图稍加修改:

复制代码 代码如下:


@Html.DropDownList("database-dropdownlist", ViewBag.database as IEnumerable, new { @class = "btn btn-success dropdown-toggle form-control" })

看看效果:

ASP.NET MVC中怎么实现下拉框绑定

中 ViewBag.database 需要进行转换否则出现如下错误:

 CS1973: “System.Web.Mvc.HtmlHelper”没有名为“DropDownList”的适用方法,但似乎有一个具有该名称的扩展方法。扩展方法不能进行动态调度。请考虑强制转换动态参数,或调用该扩展方法但不使用扩展方法语法。

下拉框绑定枚举【三】(一)

 我们同样给出一个测试类:

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

获取枚举值并绑定:

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

视图给出:

复制代码 代码如下:


@Html.DropDownList("database-dropdownlist", new SelectList(ViewBag.from_enum), new { @class = "btn btn-success dropdown-toggle form-control" })

继续看看成果:

ASP.NET MVC中怎么实现下拉框绑定

下拉框绑定枚举【三】(二)

 利用扩展方法  @Html.EnumDropDownListFor 来实现。接下来依次给出两个类来进行演示:

 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
 }

在视图中进行绑定:

 
  @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" })
  
 

我们看看结果

ASP.NET MVC中怎么实现下拉框绑定

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

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

(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 = "地区代码")]
  public String ZipCode { get; set; }

  [Required, Display(Name = "联系号码")]
  public String Phone { get; set; }
 }

(2)初始化数据

List provinceList = 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" })                              Cancel              }

(4)根据省下拉框选择到市下拉框脚本

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));
     });
    }
   });
  }

我们来看看整个过程:

ASP.NET MVC中怎么实现下拉框绑定

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...