如何優化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中文網其他相關文章！