我如何使用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中文网其他相关文章！