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

優化州和城市下拉列表加載效率的策略

直接在頁面加載時加載州和城市下拉列表的方法效率低下。本文將介紹更有效率和最佳實踐的方法。

推薦方法：

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中文網其他相關文章！