如何使用AJAX在MVC中有效地加載級聯狀態和城市下拉級？

改進的MVC雙下拉列表加載方法

在MVC中加載兩個下拉列表（州和城市）的一種方法是通過AJAX使用級聯下拉列表方法。以下是改進後的代碼版本：

控制器

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

視圖 (使用非侵入式JavaScript)

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

在這個方法中，我們使用GetCities操作方法來檢索選定州的城市，並將其作為JSON返回。在客戶端，我們使用非侵入式JavaScript來處理州下拉列表的change事件，並動態填充城市下拉列表。此方法在不進行完整頁面刷新情況下，提供了更好的用戶體驗。 代碼進行了改進，處理了cityStates為空的情況，並優化了城市下拉列表的填充方式。 添加了頁面加載時的初始化操作，確保頁面加載時城市下拉列表也得到正確填充。

以上是如何使用AJAX在MVC中有效地加載級聯狀態和城市下拉級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！