Maison > développement back-end > C++ > Comment charger efficacement les listes déroulantes de l'État et de la ville en cascade dans MVC à l'aide de l'AJAX?

Comment charger efficacement les listes déroulantes de l'État et de la ville en cascade dans MVC à l'aide de l'AJAX?

Susan Sarandon
Libérer: 2025-01-28 18:16:09
original
331 Les gens l'ont consulté

How to Efficiently Load Cascading State and City Dropdowns in MVC using AJAX?

La méthode de chargement MVC Double -Drop-Down améliorée

Une façon de charger deux listes de drop -down (états et villes) dans le MVC consiste à utiliser la méthode AJAX-Level Pull -Up List. Ce qui suit est la version de code améliorée:

Contrôleur

Voir (en utilisant un javascript non invasif)

/// <summary>
/// 获取州列表
/// </summary>
/// <returns>州列表,SelectListItem类型</returns>
private IEnumerable<SelectListItem> GetStates()
{
    using (var db = new DataEntities())
    {
        return db.States.Select(d => new SelectListItem { Text = d.StateName, Value = d.Id.ToString() });
    }
}

/// <summary>
/// 获取指定州的城市列表
/// </summary>
/// <param name="id">州ID</param>
/// <returns>城市列表,JSON格式</returns>
[HttpGet]
public ActionResult GetCities(int id)
{
    using (var db = new DataEntities())
    {
        var data = db.Cities.Where(d => d.StateId == id).Select(d => new { Text = d.CityName, Value = d.Id }).ToList();
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}
Copier après la connexion

Dans cette méthode, nous utilisons la méthode de fonctionnement pour récupérer les villes sélectionnées dans l'état et la retourner en JSON. Sur le client, nous utilisons JavaScript non invasif pour gérer l'incident

de la liste de drop -down de l'État et remplir dynamiquement la liste de drop -down de la ville. Cette méthode offre une meilleure expérience utilisateur sans actualisation complète de la page. Le code a été amélioré, la situation
@model Person

@{
    ViewBag.Title = "Home Ajax";
    IEnumerable<Person> persons = ViewBag.Persons;
    IEnumerable<SelectListItem> States = ViewBag.States;
}

@section featured {
    <div class="content-wrapper">
        <hgroup class="title"><h1>@ViewBag.Title</h1></hgroup>
    </div>
}

@section styles {
    td, th {
        border: 1px solid;
        padding: 5px 10px;
    }

    select {
        padding: 5px 2px;
        width: 310px;
        font-size: 16px;
    }
}

@section scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        var cityStates = @Html.Raw(Json.Encode(ViewBag.CityStates)); // 将CityState JSON转换为JavaScript对象

        $(document).ready(function () {
            $("#ddlState").change(function () {
                loadCities(this);
            });
            loadCities($("#ddlState")[0]); // 页面加载时初始化城市下拉列表
        });


        function loadCities(obj) {
            var stateId = parseInt($(obj).val());
            var cities = cityStates.find(v => v.Id === stateId)?.Cities;

            if (cities) {
                fillCity(cities);
            } else {
                $("#ddlCity").empty(); // 清空城市下拉列表
            }
        }

        function fillCity(cities) {
            $("#ddlCity").empty(); // 清空城市下拉列表
            $.each(cities, function (index, city) {
                $("#ddlCity").append($("<option></option>").val(city.Id).text(city.CityName));
            });
        }

        function Edit(obj, Id) {
            $("input[name='Id']").val(Id);
            var tr = $(obj).closest("tr");
            $("#txtfirstName").val($("td[data-id='fn']", tr).text().trim());
            $("#txtlastName").val($("td[data-id='ln']", tr).text().trim());
            $("#txtemail").val($("td[data-id='email']", tr).text().trim());
            $("#ddlState").val($("td[data-id='cn'] input[type='hidden']", tr).val());
            loadCities($("#ddlState")[0]); // 更新城市下拉列表
        }
    </script>
}

<h3></h3>
Copier après la connexion
de

a été traitée et la méthode de remplissage de la liste de chute urbaine a été optimisée. L'opération d'initialisation du chargement de la page est ajoutée pour garantir que la liste de drop-down est également correctement remplie lorsque la page est chargée. GetCities

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