
优化 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()
方法已存在并返回适当的数据,并且 State
和 City
对象具有 Id
和 Name
属性。 SelectListItem
的使用也更规范地处理了下拉菜单选项。 添加了默认选项"请选择城市" 和 "请选择州",提升用户体验。
以上是我如何使用Unbroustrusive JavaScript在MVC中有效加载依赖性下拉(州和城市)?的详细内容。更多信息请关注PHP中文网其他相关文章!