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

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

<code class="language-csharp">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; }
}</code>

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

<code class="language-csharp">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);
}</code>

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.

<code class="language-html">@model PersonViewModel

...

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

...</code>

Avantages

Cette méthode offre les avantages suivants:

<code class="language-javascript">$(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));
                });
            }
        });
    });
});</code>

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!