Comment charger efficacement les listes déroulantes de l'État et de la ville en cascade dans MVC à l'aide de l'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);
    }
}

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 id="ViewBag-Title">@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>

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!