Maison > développement back-end > C++ > Comment puis-je optimiser le chargement de deux listes déroulantes dépendantes dans MVC?

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

DDD
Libérer: 2025-01-28 18:21:10
original
921 Les gens l'ont consulté

How Can I Optimize Loading Two Dependent Dropdowns in 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));
    });
  });
});
Copier après la connexion

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 渲染城市下拉菜单并添加到缓存 ...
    });
  }
});
Copier après la connexion
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();
Copier après la connexion

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

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal