MVCの2つの従属ドロップダウンのロードを最適化するにはどうすればよいですか？

MVCの2つのドロップダウンメニューを改善するためのより良い方法提供されたコードは、MVVMモードを使用して州と都市を効果的にロードしますが、改善の余地はまだあります。 州と都市の選択を簡素化

jQuery関数を再構築し、

メソッドを使用して都市ドロップダウンメニューを削除してから、新しいオプションを追加します。 [必須]を検証できるようにするための最初のオプションとして、の代わりにの使用を検討してください。

.empty()ajax Calls val(null)冗長なAJAXコールを回避するために、各州に都市データを保存するためにキャッシュメカニズムが達成されます。 val(0)

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));
    });
  });
});

<替>代替方法：都市データを初期化

州と都市の数が限られている場合、すべての都市を視界に渡すことを検討し、jQueryを使用して、州の選択に応じて対応する都市をフィルタリングして表示できます。

コントローラーの

：

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 渲染城市下拉菜单并添加到缓存 ...
    });
  }
});

ビュー（スクリプト）：

<提>その他のヒント

非侵襲的JavaScriptを使用して、マークと動作を分離します。

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

構築された-in Auxiliaryメソッド（@url.action、@html.raw）を使用して、コードを簡潔にし、ハードコーディングを避けます。

// 将所有城市赋值给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 数组渲染城市下拉菜单 ...
});

この復活は、異なるWordinと文の構造を使用します

以上がMVCの2つの従属ドロップダウンのロードを最適化するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。