Bagaimanakah saya boleh mengoptimumkan memuat dua dropdowns bergantung di MVC?

Cara yang lebih baik untuk memperbaiki dua menu drop -down di MVC

Kod yang disediakan menggunakan mod MVVM untuk memuatkan negeri dan bandar secara berkesan, tetapi masih ada ruang untuk penambahbaikan.

Memudahkan pemilihan negeri dan bandar

Membina semula fungsi jQuery, gunakan kaedah untuk mengeluarkan menu drop -down bandar, dan kemudian tambahkan pilihan baru. Pertimbangkan penggunaan

bukan

sebagai pilihan pertama untuk membenarkan [diperlukan] untuk mengesahkan. .empty() val(null) val(0) Mengoptimumkan panggilan AJAX

<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>

Untuk mengelakkan panggilan Ajax yang berlebihan, mekanisme cache dicapai untuk menyimpan data bandar di setiap negeri.

Kaedah alternatif: Inisialisasi data bandar

<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>

Jika bilangan negeri dan bandar adalah terhad, anda boleh mempertimbangkan lulus semua bandar ke pandangan, dan menggunakan jQuery untuk menapis dan memaparkan bandar -bandar yang sepadan mengikut pilihan negara.

di pengawal:

dalam pandangan (skrip):

Petua Lain

<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>

Menggunakan JavaScript bukan -invasive untuk memisahkan tanda dan tingkah laku.

Gunakan kaedah tambahan yang dibina (@url.action,@html.raw) untuk membuat kod ringkas dan mengelakkan pengekodan keras.

[

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengoptimumkan memuat dua dropdowns bergantung di MVC?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!