Bagaimanakah saya dapat memuat turun dropdowns bergantung (negeri dan bandar) dengan cekap menggunakan JavaScript yang tidak mengganggu?

mengoptimumkan pelan untuk memuatkan menu drop -down berganda di MVC

Secara tradisinya, memuatkan menu drop -down negeri dan bandar dalam aplikasi MVC memerlukan gabungan operasi pengawal dan kod JavaScript. Walaupun kaedah ini berkesan, ia mungkin membosankan dan mudah membuat kesilapan. Marilah kita meneroka cara yang lebih cekap dan lebih kuat untuk menangani tugas ini.

menggunakan model paparan dan JavaScript bukan -invasive

Daripada mengodkan menu drop -down dalam paparan, lebih baik memperkenalkan model paparan untuk mengandungi semua data yang diperlukan. Di samping itu, kami akan menggunakan JavaScript bukan -invasive untuk meningkatkan pengalaman pengguna tanpa penanda pencemaran.

Model Lihat

Operasi pengawal

<code class="language-csharp">public class PersonViewModel
{
    public int StateID { get; set; }
    public int CityID { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }
}</code>

Dalam operasi pengawal, kami akan menyediakan model paparan dan lulus kepada pandangan.

Lihat

Dalam pandangan, kami akan menggunakan penolong

<code class="language-csharp">public ActionResult Index()
{
    var states = GetStates().Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.Name }).ToList();
    var cities = GetCities().Select(c => new SelectListItem { Value = c.Id.ToString(), Text = c.Name }).ToList();
    var model = new PersonViewModel
    {
        States = states,
        Cities = cities
    };

    return View(model);
}</code>

untuk membentangkan menu drop -down.

JavaScript non -invasive

@Html.DropDownList Menggunakan jQuery, kita dapat meningkatkan tingkah laku menu drop -down negeri dan memuatkan secara dinamik bandar.

<code class="language-html">@model PersonViewModel

...

@Html.DropDownListFor(m => m.StateID, Model.States, "请选择州")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "请选择城市")

...</code>

Kelebihan

Kaedah ini memberikan kelebihan berikut:

<code class="language-javascript">$(document).ready(function() {
    $("#StateID").change(function() {
        var stateId = $(this).val();
        $.ajax({
            url: '@Url.Action("GetCities", "Home")',
            data: { stateId: stateId },
            success: function(response) {
                var citiesDropdown = $('#CityID');
                citiesDropdown.empty();
                citiesDropdown.append($("<option></option>").attr("value", "").text("请选择城市")); // 添加默认选项
                $.each(response, function(index, city) {
                    citiesDropdown.append($("<option></option>").attr("value", city.Id).text(city.Name));
                });
            }
        });
    });
});</code>

Dengan menghapuskan operasi pelbagai pengawal, kerumitan kod dikurangkan.

Oleh kerana pemisahan tumpuan antara model paparan, pengawal dan pandangan, ia meningkatkan penyelenggaraan.

dengan meningkatkan pengalaman pengguna dengan memuatkan bandar -bandar di keadaan yang dipilih.

Permintaan Essable hanya apabila perlu untuk mengurangkan beban pelayan.

Nota: Klip kod di atas mengandaikan bahawa
• dan
kaedah telah wujud dan mengembalikan data yang sesuai, dan
• dan
objek mempunyai sifat
• dan
. Penggunaan

juga mengendalikan pilihan menu drop -down lebih diseragamkan. Selepas menambah pilihan lalai ", pilih bandar" dan "Sila pilih Negeri" untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah saya dapat memuat turun dropdowns bergantung (negeri dan bandar) dengan cekap menggunakan JavaScript yang tidak mengganggu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!