Maison > développement back-end > C++ > Comment puis-je charger efficacement les couverts dépendants dépendants (État et ville) dans MVC en utilisant JavaScript discret?

Comment puis-je charger efficacement les couverts dépendants dépendants (État et ville) dans MVC en utilisant JavaScript discret?

Linda Hamilton
Libérer: 2025-01-28 18:26:09
original
774 Les gens l'ont consulté

How Can I Efficiently Load Dependent Dropdowns (State and City) in MVC Using Unobtrusive JavaScript?

Optimiser le plan de chargement du menu Double Drop -Down dans le MVC

Traditionnellement, le chargement du menu de drop-down de l'état et urbain dans l'application MVC nécessite la combinaison de l'opération de contrôleur et du code JavaScript. Bien que cette méthode soit efficace, elle peut être fastidieuse et facile de faire des erreurs. Explorons un moyen plus efficace et plus puissant de gérer cette tâche.

Utilisation de modèles de vue et javascript non invasif

Au lieu de coder le menu Drop -Down dans la vue, il est préférable d'introduire un modèle de vue pour contenir toutes les données nécessaires. De plus, nous utiliserons JavaScript non invasif pour améliorer l'expérience utilisateur sans marquage de pollution.

Affichage du modèle

Fonctionnement du contrôleur

public class PersonViewModel
{
    public int StateID { get; set; }
    public int CityID { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }
}
Copier après la connexion
Dans le fonctionnement du contrôleur, nous préparerons le modèle de vue et le passerons à la vue.

<图> Voir

Dans la vue, nous utiliserons l'assistance
public ActionResult Index()
{
    var states = GetStates().Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.Name }).ToList();
    var cities = GetCities().Select(c => new SelectListItem { Value = c.Id.ToString(), Text = c.Name }).ToList();
    var model = new PersonViewModel
    {
        States = states,
        Cities = cities
    };

    return View(model);
}
Copier après la connexion
pour présenter le menu Drop -Down.

<侵> JavaScript non invasif

@Html.DropDownList En utilisant jQuery, nous pouvons améliorer le comportement du menu Drop -Down et charger dynamiquement la ville.

@model PersonViewModel

...

@Html.DropDownListFor(m => m.StateID, Model.States, "请选择州")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "请选择城市")

...
Copier après la connexion

<势> Avantages

Cette méthode offre les avantages suivants:

$(document).ready(function() {
    $("#StateID").change(function() {
        var stateId = $(this).val();
        $.ajax({
            url: '@Url.Action("GetCities", "Home")',
            data: { stateId: stateId },
            success: function(response) {
                var citiesDropdown = $('#CityID');
                citiesDropdown.empty();
                citiesDropdown.append($("<option></option>").attr("value", "").text("请选择城市")); // 添加默认选项
                $.each(response, function(index, city) {
                    citiesDropdown.append($("<option></option>").attr("value", city.Id).text(city.Name));
                });
            }
        });
    });
});
Copier après la connexion
En éliminant le fonctionnement de plusieurs contrôleurs, la complexité du code est réduite.

En raison de la séparation de la mise au point entre les modèles de vue, les contrôleurs et les vues, il améliore la maintenance.

en améliorant l'expérience utilisateur en chargeant des villes à l'état sélectionné.

Demandes essables uniquement lorsque cela est nécessaire pour réduire la charge du serveur.
  • Remarque: Les clips de code ci-dessus supposent que les méthodes
  • et
  • ont existé et renvoyaient les données appropriées, et
  • et
  • les objets ont des propriétés
  • et
  • . L'utilisation de
a également géré l'option de menu Drop -Down plus standardisé. Après avoir ajouté l'option par défaut ", sélectionnez la ville" et "Veuillez sélectionner l'état" pour améliorer l'expérience utilisateur.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal