Rumah > pembangunan bahagian belakang > C++ > Bagaimanakah saya dapat memuat turun dropdowns bergantung (negeri dan bandar) dengan cekap menggunakan JavaScript yang tidak mengganggu?

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

Linda Hamilton
Lepaskan: 2025-01-28 18:26:09
asal
774 orang telah melayarinya

How Can I Efficiently Load Dependent Dropdowns (State and City) in MVC Using Unobtrusive JavaScript?

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

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; }
}
Salin selepas log masuk
Dalam operasi pengawal, kami akan menyediakan model paparan dan lulus kepada pandangan.

<图> Lihat

Dalam pandangan, kami akan menggunakan penolong
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);
}
Salin selepas log masuk
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.

@model PersonViewModel

...

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

...
Salin selepas log masuk

<势> Kelebihan

Kaedah ini memberikan kelebihan berikut:

$(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));
                });
            }
        });
    });
});
Salin selepas log masuk
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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan