Wie kann ich mit AJAX den kaskadierenden Zustand und die Städte in MVC effizient laden?

Die verbesserte MVC Double -drop -Down -Liste Lademethode

Eine Möglichkeit, zwei Drop -Down -Listen (Zustände und Städte) in der MVC zu laden, besteht darin, die AJAX -Level -Pull -up -List -Methode zu verwenden. Das Folgende ist die verbesserte Codeversion:

Controller

Ansicht (mit nicht -invasivem JavaScript)

/// <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);
    }
}

In dieser Methode verwenden wir die -Onbetriebsmethode, um die im Staat ausgewählten Städte abzurufen und sie als JSON zurückzugeben. Auf dem Client verwenden wir nicht -invasive JavaScript, um den Vorfall der staatlichen Drop -Down -Liste zu verarbeiten und die Drop -Down -Liste der Stadt dynamisch zu füllen. Diese Methode bietet eine bessere Benutzererfahrung ohne vollständige Aktualisierung von Seiten. Der Code wurde verbessert, die

-Stallation von

@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>

wurde verarbeitet und die Füllmethode der städtischen Drop -Down -Liste wurde optimiert. Der Initialisierungsbetrieb des Ladens der Seite wird hinzugefügt, um sicherzustellen, dass die List der Stadtabfälle beim Laden der Seite ebenfalls korrekt ausgefüllt ist.

Das obige ist der detaillierte Inhalt vonWie kann ich mit AJAX den kaskadierenden Zustand und die Städte in MVC effizient laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!