如何使用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>@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中文网其他相关文章！