Comment puis-je optimiser le chargement de deux listes déroulantes dépendantes dans MVC?

Une meilleure façon d'améliorer les deux menus de drop -down dans le MVC

Le code fourni utilise le mode MVVM pour charger efficacement l'état et les villes, mais il y a encore de la place à l'amélioration.

Simplifier la sélection de l'état et de la ville

reconstruire la fonction jQuery, utiliser la méthode pour supprimer le menu Urban Drop -Down, puis ajouter une nouvelle option. Considérez l'utilisation de

au lieu de

comme première option pour permettre à [obligatoire] de vérifier. .empty() val(null) val(0) Optimiser les appels ajax

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

Afin d'éviter les appels AJAX redondants, un mécanisme de cache est réalisé pour stocker les données urbaines dans chaque état.

<替> Méthode alternative: Initialiser les données urbaines

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

Si le nombre d'états et de villes est limité, vous pouvez envisager de passer toutes les villes à la vue et utiliser jQuery pour filtrer et afficher les villes correspondantes en fonction du choix de l'État.

dans le contrôleur:

dans la vue (script):

<提> Autres conseils

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

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

Utilisation de JavaScript non invasif pour séparer la marque et le comportement.

Utilisez la méthode auxiliaire intégrée (@ url.action, @ html.raw) pour rendre le code concis et éviter le codage dur.

Cette réponse révolue maintient la signification d'origine tout en utilisant des structures de mots et de phrases différentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!