在MVC中加载2下拉菜单的更好方法

在MVC中加载2下拉菜单的更好方法,第1张

在MVC中加载2下拉菜单的更好方法

尽管我会建议一些更好的做法,包括使用具有

StateID
CityID

StateList
和属性的视图模型
CityList
,并使用Unobtrusive
Javascript
而不是使用行为来污染您的标记,并使用ajax来生成第一个(“请选择”)选项,您可以使用ajax更好
null
值而不是
0
它可以与
[Required]
属性一起使用

的HTML

@Html.DropDownList(m => m.StateID, States, "Select State") // remove the onchange@Html.DropDownListFor(m => m.CityID, Cities, "Select City") // why change the default ID?

脚本

var url = '@Url.Action("GetCities", "Home")'; // use the helper (dont hard pre)var cities = $('#CityID'); // cache the element$('#StateID').change(function() {  $.getJSON(url, { id: $(this).val() }, function(response) {    // clear and add default (null) option    cities.empty().append($('<option></option>').val('').text('Please select'));    $.each(response, function(index, item) {      cities.append($('<option></option>').val(item.Value).text(item.Text));    });  });});

如果要渲染多个项目(例如,您要让用户选择他们最近访问的10个城市),则可以缓存第一个呼叫的结果,以避免重复呼叫,因为他们的选择可能包括来自同一州的城市。

var cache = {};$('#StateID').change(function() {  var selectedState = $(this).val();  if (cache[selectedState]) {    // render the options from the cache  } else {    $.getJSON(url, { id: selectedState }, function(response) {      // add to cache      cache[selectedState] = response;      .....    });  }});

最后,根据您对不使用ajax进行 *** 作的评论,您可以将所有城市传递到视图,并将它们分配给javascript数组。如果您有几个国家/地区,每个城市都有几个城市,我只会建议您这样做。这是在略微增加初始加载时间与进行ajax调用时略微延迟之间取得平衡的问题。

在控制器中

model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();

在视图中(脚本)

// assign all cities to javascript arrayvar allCities= JSON.parse('@Html.Raw(Json.Enpre(Model.CityList))');$('#StateID').change(function() {  var selectedState = $(this).val();  var cities = $.grep(allCities, function(item, index) {    return item.CountryID == selectedState;  });  // build options based on value of cities});


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5559890.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-14
下一篇 2022-12-14

发表评论

登录后才能评论

评论列表(0条)

保存