如何提高各州和城市的加载下拉列表的效率？

优化州和城市下拉列表加载效率的策略

直接在页面加载时加载州和城市下拉列表的方法效率低下。本文将介绍更有效率和最佳实践的方法。

推荐方法：

1. 使用视图模型:

创建一个视图模型，包含StateID、CityID、StateList和CityList属性。这有助于封装数据并提供强类型。

2. 使用非侵入式JavaScript:

避免在标记中使用内联JavaScript。相反，使用非侵入式JavaScript来分离HTML和行为。

下拉列表修改:

HTML:

<code class="language-html">@Html.DropDownList(m => m.StateID, States, "选择州")  //移除onchange属性
@Html.DropDownListFor(m => m.CityID, Cities, "选择城市") //保留默认ID</code>

JavaScript:

<code class="language-javascript">const url = '@Url.Action("GetCities", "Home")'; // 使用助手方法
const citiesDropdown = $('#CityID'); // 缓存元素

$('#StateID').change(function () {
  $.getJSON(url, { id: $(this).val() }, function (response) {
    // 清空并添加默认（null）选项
    citiesDropdown.empty().append($('<option></option>').val('').text('请选择'));

    $.each(response, function (index, item) {
      citiesDropdown.append($('<option></option>').val(item.Value).text(item.Text));
    });
  });
});</code>

缓存优化:

如果渲染多个项目，并且它们的选项可能包含来自同一州的城市，可以使用缓存来避免重复的API调用。

<code class="language-javascript">const cache = {};

$('#StateID').change(function () {
  const selectedState = $(this).val();

  if (cache[selectedState]) {
    // 从缓存中渲染选项
    // ... 使用cache[selectedState]渲染城市下拉列表
  } else {
    $.getJSON(url, { id: selectedState }, function (response) {
      // 添加到缓存
      cache[selectedState] = response;

      // ... 使用response渲染城市下拉列表
    });
  }
});</code>

无需Ajax的替代方法:

如果州和城市的數量有限，可以将所有城市传递到视图中，并将其分配给JavaScript数组。但是，这可能会导致初始加载时间略长。

在控制器中:

<code class="language-csharp">model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();</code>

在视图中 (JavaScript):

<code class="language-javascript">// 将所有城市分配给JavaScript数组
const allCities = JSON.parse('@Html.Raw(Json.Encode(Model.CityList))');

$('#StateID').change(function () {
  const selectedState = $(this).val();
  const cities = $.grep(allCities, function (item, index) {
    return item.CountryID == selectedState;
  });

  // 基于cities的值构建选项
  // ... 使用cities数组渲染城市下拉列表
});</code>

以上是如何提高各州和城市的加载下拉列表的效率？的详细内容。更多信息请关注PHP中文网其他相关文章！