Wie kann ich die Effizienz von Dropdown -Listen für Staaten und Städte verbessern?

Die Strategie des Ladens der Liste der Staat -to -drop -Down -Liste des Zustands des Staates und der Stadt

Die Methode zum Laden der Liste der Status -Drop -Down -Liste direkt beim Laden auf der Seite ist ineffizient. In diesem Artikel werden effizientere und Best Practices eingeführt.

Empfohlene Methode:

<.> 1. Verwenden Sie das Ansichtsmodell:

Erstellen Sie ein Ansichtsmodell, einschließlich der Eigenschaften von LateID, Cityid, Statelist und CityList. Dies hilft bei der Verpackung von Daten und bietet starke Typen.

<.> 2. verwenden Sie nicht -invasive JavaScript:

Vermeiden Sie die Verwendung des inneren Union JavaScript in der Marke. Stattdessen wird das nichtinvasive JavaScript verwendet, um HTML und Verhalten zu trennen.

Drop -Down -Liste Änderung:

html:

JavaScript:

Cache -Optimierung:

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

Wenn mehrere Elemente gerendert werden und ihre Optionen Städte aus demselben Zustand enthalten, kann Cache verwendet werden, um wiederholte API -Aufrufe zu vermeiden.

ajax Ersatzmethode:

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

Wenn die Anzahl der Zustände und Städte begrenzt ist, können alle Städte an die Ansicht übertragen und dem JavaScript -Array zugeordnet werden. Dies kann jedoch zu einer langen Zeit der anfänglichen Belastung führen. im Controller:

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

In der Ansicht (JavaScript):

Das obige ist der detaillierte Inhalt vonWie kann ich die Effizienz von Dropdown -Listen für Staaten und Städte verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!