尽管我会建议一些更好的做法,包括使用具有
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});
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)