ホームページ > バックエンド開発 > C++ > MVCの2つの従属ドロップダウンのロードを最適化するにはどうすればよいですか?

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

DDD
リリース: 2025-01-28 18:21:10
オリジナル
919 人が閲覧しました

How Can I Optimize Loading Two Dependent Dropdowns in MVC?

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート