Html下拉框主要体现在select标签和option标签, 中我们使用mvc html扩展方法@Html.DropDownListFor()来 轻松绑定下拉列表属性值,我们已一段代码说明给下拉列表来怎么动态赋值。
说明 页面代码 数据模型 Ajax联动 后台action 结语
说明
我们通过Web开发框架两个下拉列表赋值案例来说明,下拉框1值通过属性值绑定AvailableCategories直接从后台获取,下拉框2值SensorList实现与下拉框1值变化而联动。
页面代码
@Html.DropDownListFor(model => model.Cid, Model.AvailableCategories, new { @class = "form-control" })@Html.DropDownListFor(model => model.Sensor, Model.SensorList, new { @class = "form-control" })
数据模型
////// 下拉框1/// public IListAvailableCategories { get; set; }/// /// 下拉框1值/// [NopResourceDisplayName("Search.Category")]public int Cid { get; set; }////// 下拉框2/// public ListSensorList { get; set; }/// /// 下拉框2值/// [AllowHtml]public string Sensor { get; set; }Ajax联动$(function () {$('#Cid').change(function () {var data = "cid=" + $(this).val();var disoptioan = {url: "@Url.Action("GetCamaraSensors", "Catalog")",type: 'Get',dataType: 'json',data: data,context: this,success: function (result) {$("#Sensor").empty();for (var i = 0; i < result.length; i++) {var text = result[i].Text;var value = result[i].Value;$("#Sensor").append(new Option(text, value));}}};$.ajax(disoptioan);});});
后台action
public ActionResult GetCamaraSensors(int cid){IListsensorsList = new List ();sensorsList.Add(new SelectListItem { Text = _localizationService.GetResource("common.selected"), Value = "0" });List productCategories = _categoryService.GetProductCategoriesByCategoryId(cid, 0, int.MaxValue).ToList();productCategories.ForEach(p =>{sensorsList.Add(new SelectListItem { Text = p.Product.Name, Value = p.ProductId.ToString() });});return Json(sensorsList, JsonRequestBehavior.AllowGet);}
结语
1、AvailableCategories中SelectListItem是一个有text和mvalue特性的类,web开发平台中通过ViewModel绑定赋值给下拉框1。
2、SensorList中SelectListItem是一个有text和mvalue特性的类,通过Ajax异步从后台获取列表值后动态绑定赋值给下拉框2。3、Web开发框架Ajax代码说明:下拉框1值改变后触发js change事件,通过ajax异步提交查询获取查询结果,success回调函数中赋值给下拉框2。4、运行结果: