如何优化MVC中的两个依赖性下拉列表？

改进MVC中两个下拉菜单加载的更佳方法

提供的代码使用MVVM模式有效地加载州和城市，但仍有改进的空间。

简化州和城市选择

重构jQuery函数，使用.empty()方法清除城市下拉菜单，然后再添加新的选项。考虑使用val(null)代替val(0)作为第一个选项，以允许[Required]验证。

<code class="language-javascript">var url = '@Url.Action("GetCities", "Home")';
var cities = $('#CityID');
$('#StateID').change(function() {
  $.getJSON(url, { id: $(this).val() }, function(response) {
    cities.empty().append($('<option>').val(null).text('请选择'));
    $.each(response, function(index, item) {
      cities.append($('<option>').val(item.Value).text(item.Text));
    });
  });
});</code>

优化Ajax调用

为了避免冗余的Ajax调用，实现一个缓存机制来存储每个州的城市数据。

<code class="language-javascript">var cache = {};
$('#StateID').change(function() {
  var selectedState = $(this).val();
  if (cache[selectedState]) {
    // 从缓存中渲染选项
    // ... 使用 cache[selectedState] 渲染城市下拉菜单 ...
  } else {
    $.getJSON(url, { id: selectedState }, function(response) {
      // 添加到缓存
      cache[selectedState] = response;
      // ... 使用 response 渲染城市下拉菜单并添加到缓存 ...
    });
  }
});</code>

替代方法：初始化城市数据

如果州和城市的数量有限，可以考虑将所有城市传递到视图，并使用jQuery根据州的选择来过滤和显示相应的城市。

在控制器中：

<code class="language-csharp">model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();</code>

在视图（脚本）中：

<code class="language-javascript">// 将所有城市赋值给JavaScript数组
var allCities = JSON.parse('@Html.Raw(Json.Encode(Model.CityList))');
$('#StateID').change(function() {
  var selectedState = $(this).val();
  var cities = $.grep(allCities, function(item, index) {
    return item.CountryID == selectedState;
  });
  // 基于cities的值构建选项
  // ... 使用 cities 数组渲染城市下拉菜单 ...
});</code>

其他提示

• 使用非侵入式JavaScript将标记和行为分开。
• 使用内置的辅助方法（@Url.Action，@Html.Raw）使代码简洁，避免硬编码。

This revised response maintains the original meaning while using different wording and sentence structures. The code examples are slightly modified for clarity and to avoid unnecessary repetition. The image remains in its original format and location.

以上是如何优化MVC中的两个依赖性下拉列表？的详细内容。更多信息请关注PHP中文网其他相关文章！