Bagaimana dengan cekap memuatkan cascading negeri dan bandar jatuh di MVC menggunakan AJAX?

Kaedah pemuatan senarai double -drop -down MVC yang lebih baik

Satu cara untuk memuatkan dua senarai drop -down (negeri dan bandar) di MVC adalah menggunakan kaedah senarai pull -up Ajax -level. Berikut adalah versi kod yang lebih baik:

pengawal

Lihat (menggunakan javascript bukan -invasive)

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

Dalam kaedah ini, kami menggunakan kaedah operasi untuk mendapatkan bandar -bandar yang dipilih di negeri ini dan mengembalikannya sebagai JSON. Pada pelanggan, kami menggunakan JavaScript bukan -invasive untuk mengendalikan insiden

senarai drop -down negeri dan secara dinamik mengisi senarai drop -down bandar. Kaedah ini memberikan pengalaman pengguna yang lebih baik tanpa menyegarkan halaman lengkap. Kod ini telah diperbaiki, keadaan

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

diproses, dan kaedah pengisian senarai drop -down bandar dioptimumkan. Operasi inisialisasi pemuatan halaman ditambah untuk memastikan senarai drop -down bandar juga diisi dengan betul apabila halaman dimuatkan. GetCities

Atas ialah kandungan terperinci Bagaimana dengan cekap memuatkan cascading negeri dan bandar jatuh di MVC menggunakan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!