首页 > 后端开发 > C++ > 我如何使用Unbroustrusive JavaScript在MVC中有效加载依赖性下拉(州和城市)?

我如何使用Unbroustrusive JavaScript在MVC中有效加载依赖性下拉(州和城市)?

Linda Hamilton
发布: 2025-01-28 18:26:09
原创
763 人浏览过

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

优化 MVC 中双下拉菜单加载的方案

传统上,在 MVC 应用程序中加载州和城市下拉菜单需要结合控制器操作和 JavaScript 代码。虽然这种方法有效,但它可能繁琐且容易出错。让我们探索一种更高效、更强大的方法来处理此任务。

使用视图模型和非侵入式 JavaScript

与其在视图中硬编码下拉菜单,不如引入一个视图模型来包含所有必要的数据。此外,我们将使用非侵入式 JavaScript 来增强用户体验,而不会污染标记。

视图模型

1

2

3

4

5

6

7

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

}

登录后复制

控制器操作

在控制器操作中,我们将准备视图模型并将其传递给视图。

1

2

3

4

5

6

7

8

9

10

11

12

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

}

登录后复制

视图

在视图中,我们将使用 @Html.DropDownList 帮助器来呈现下拉菜单。

1

2

3

4

5

6

7

8

@model PersonViewModel

 

...

 

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

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

 

...

登录后复制

非侵入式 JavaScript

使用 jQuery,我们可以增强州下拉菜单的行为,以动态加载城市。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$(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));

                });

            }

        });

    });

});

登录后复制

优势

这种方法提供了以下几个优点:

  • 通过消除多个控制器操作来降低代码复杂性。
  • 由于视图模型、控制器和视图之间关注点的分离,提高了可维护性。
  • 通过根据所选州动态加载城市来改善用户体验。
  • 通过仅在必要时执行请求来减少服务器负载。

注意:以上代码片段假设 GetStates()GetCities() 方法已存在并返回适当的数据,并且 StateCity 对象具有 IdName 属性。 SelectListItem 的使用也更规范地处理了下拉菜单选项。 添加了默认选项"请选择城市" 和 "请选择州",提升用户体验。

以上是我如何使用Unbroustrusive JavaScript在MVC中有效加载依赖性下拉(州和城市)?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板