如何在MVC中有效地加载两个依赖的下拉列表（状态和城市）？

在MVC应用程序中优化依赖下拉加载

> >本文介绍了MVC应用程序中两个互连下拉列表（状态和城市）的有效加载。 一种常见的方法涉及使用Ajax在州选择时填充城市下拉菜。但是，这可以显着改善。

>

增强方法：

虽然Ajax仍然是一个可行的选择，但几种增强功能提高了效率和可维护性：

1。利用ViewModels：

使用ViewModel来合并状态和城市下拉属性，将数据传输简化为视图。

2。拥抱不引人注目的JavaScript：

与HTML标记单独的JavaScript逻辑，以提供更好的代码组织和可维护性。 这提高了可读性并简化了未来的修改。

3。实现“请选择”选项：

在两个下拉列表中都包含一个带有空值的“请选择”选项。这有助于使用属性的服务器端验证。> [Required]

说明性代码片段：

html：

>

> javaScript：

<code class="language-html">@Html.DropDownListFor(m => m.StateID, Model.States, "Select State")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "Select City")</code>

>

进一步的增强：

<code class="language-javascript">const url = '@Url.Action("GetCities", "Home")';
const citiesDropdown = $('#CityID');
$('#StateID').change(function() {
    $.getJSON(url, { stateId: $(this).val() }, function(data) {
        citiesDropdown.empty().append($('<option/>').val('').text('Please select'));
        $.each(data, function(index, item) {
            citiesDropdown.append($('<option/>').val(item.Value).text(item.Text));
        });
    });
});</code>

缓存：对于广泛的城市数据集，实现数据缓存，以最大程度地减少经常访问的状态的冗余数据库查询。>

>

>预载数据： 这种精致的方法可确保更清洁，更可维护的代码，同时优化MVC应用程序中依赖的下拉载荷加载的性能。

以上是如何在MVC中有效地加载两个依赖的下拉列表（状态和城市）？的详细内容。更多信息请关注PHP中文网其他相关文章！