州や都市のロードドロップダウンリストの効率を改善するにはどうすればよいですか？

州と市の州と市の州のリストを積み込む戦略

ページにロードするときに状態ドロップダウンリストを直接ロードする方法は非効率的です。この記事では、より効率的でベストプラクティスを紹介します。

推奨方法：

1。ビューモデルを使用してください：

StateID、CityID、Statelist、CityList Propertiesなどのビューモデルを作成します。これにより、データのパッケージ化に役立ち、強力なタイプを提供します。

2。非侵襲的JavaScript：

を使用します

マークで内部ユニオンJavaScriptを使用しないでください。代わりに、非侵襲的JavaScriptを使用してHTMLと動作を分離します。

ドロップダウンリストの変更：

html：

javascript：

キャッシュ最適化：

<code class="language-html">@Html.DropDownList(m => m.StateID, States, "选择州")  //移除onchange属性
@Html.DropDownListFor(m => m.CityID, Cities, "选择城市") //保留默认ID</code>

複数のアイテムがレンダリングされ、そのオプションに同じ状態の都市が含まれる場合は、Cacheを使用して繰り返しAPI呼び出しを避けることができます。

ajax置換方法：

<code class="language-javascript">const url = '@Url.Action("GetCities", "Home")'; // 使用助手方法
const citiesDropdown = $('#CityID'); // 缓存元素

$('#StateID').change(function () {
  $.getJSON(url, { id: $(this).val() }, function (response) {
    // 清空并添加默认（null）选项
    citiesDropdown.empty().append($('<option></option>').val('').text('请选择'));

    $.each(response, function (index, item) {
      citiesDropdown.append($('<option></option>').val(item.Value).text(item.Text));
    });
  });
});</code>

州と都市の数が限られている場合、すべての都市をビューに渡してJavaScriptアレイに割り当てることができます。ただし、これは最初の負荷の長い時間につながる可能性があります。 コントローラーの：

ビュー（javascript）の

<code class="language-javascript">const cache = {};

$('#StateID').change(function () {
  const selectedState = $(this).val();

  if (cache[selectedState]) {
    // 从缓存中渲染选项
    // ... 使用cache[selectedState]渲染城市下拉列表
  } else {
    $.getJSON(url, { id: selectedState }, function (response) {
      // 添加到缓存
      cache[selectedState] = response;

      // ... 使用response渲染城市下拉列表
    });
  }
});</code>

：

以上が州や都市のロードドロップダウンリストの効率を改善するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。