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; } }
<图> 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); }
<侵> 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, "请选择城市") ...
<势> 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)); }); } }); }); });
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.
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!