我如何使用Unbroustrusive JavaScript在MVC中有效加載依賴性下拉（州和城市）？

優化 MVC 中雙下拉菜單加載的方案

傳統上，在 MVC 應用程序中加載州和城市下拉菜單需要結合控制器操作和 JavaScript 代碼。雖然這種方法有效，但它可能繁瑣且容易出錯。讓我們探索一種更高效、更強大的方法來處理此任務。

使用視圖模型和非侵入式 JavaScript

與其在視圖中硬編碼下拉菜單，不如引入一個視圖模型來包含所有必要的數據。此外，我們將使用非侵入式 JavaScript 來增強用戶體驗，而不會污染標記。

視圖模型

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

控制器操作

在控制器操作中，我們將準備視圖模型並將其傳遞給視圖。

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

視圖

在視圖中，我們將使用 @Html.DropDownList 幫助器來呈現下拉菜單。

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

...

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

...</code>

非侵入式 JavaScript

使用 jQuery，我們可以增強州下拉菜單的行為，以動態加載城市。

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

優勢

這種方法提供了以下幾個優點：

• 通過消除多個控制器操作來降低代碼複雜性。
• 由於視圖模型、控制器和視圖之間關注點的分離，提高了可維護性。
• 通過根據所選州動態加載城市來改善用戶體驗。
• 通過僅在必要時執行請求來減少服務器負載。

注意：以上代碼片段假設 GetStates() 和 GetCities() 方法已存在並返回適當的數據，並且 State 和 City 對象具有 Id 和 Name 屬性。 SelectListItem 的使用也更規範地處理了下拉菜單選項。 添加了默認選項"請選擇城市" 和 "請選擇州"，提升用戶體驗。

以上是我如何使用Unbroustrusive JavaScript在MVC中有效加載依賴性下拉（州和城市）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！