Wie kann ich das Laden von zwei abhängigen Dropdowns in MVC optimieren?

Eine bessere Möglichkeit, die beiden Drop -Down -Menüs im MVC

zu verbessern Der bereitgestellte Code verwendet den MVVM -Modus, um den Zustand und die Städte effektiv zu laden, aber es gibt immer noch Raum für Verbesserungen.

Vereinfachen Sie die Auswahl der Staats- und Stadt

rekonstruieren Sie die JQuery -Funktion, verwenden Sie die Methode , um das städtische Drop -Down -Menü zu entfernen und dann eine neue Option hinzuzufügen. Betrachten Sie die Verwendung von

anstelle von

als erste Option, mit der [erforderlich] überprüft werden kann. .empty() val(null) val(0) optimieren Sie AJAX -Aufrufe

<code class="language-javascript">var url = '@Url.Action("GetCities", "Home")';
var cities = $('#CityID');
$('#StateID').change(function() {
  $.getJSON(url, { id: $(this).val() }, function(response) {
    cities.empty().append($('<option>').val(null).text('请选择'));
    $.each(response, function(index, item) {
      cities.append($('<option>').val(item.Value).text(item.Text));
    });
  });
});</code>

Um redundante AJAX -Aufrufe zu vermeiden, wird ein Cache -Mechanismus erreicht, um städtische Daten in jedem Bundesstaat zu speichern.

Alternative Methode: Initialisieren Sie urbane Daten

<code class="language-javascript">var cache = {};
$('#StateID').change(function() {
  var selectedState = $(this).val();
  if (cache[selectedState]) {
    // 从缓存中渲染选项
    // ... 使用 cache[selectedState] 渲染城市下拉菜单 ...
  } else {
    $.getJSON(url, { id: selectedState }, function(response) {
      // 添加到缓存
      cache[selectedState] = response;
      // ... 使用 response 渲染城市下拉菜单并添加到缓存 ...
    });
  }
});</code>

Wenn die Anzahl der Zustände und Städte begrenzt ist, können Sie in Betracht ziehen, alle Städte an die Ansicht zu übergeben und JQuery zu verwenden, um die entsprechenden Städte gemäß der Wahl des Staates zu filtern und anzuzeigen.

im Controller:

in der Ansicht (Skript):

Andere Tipps

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

<code class="language-javascript">// 将所有城市赋值给JavaScript数组
var allCities = JSON.parse('@Html.Raw(Json.Encode(Model.CityList))');
$('#StateID').change(function() {
  var selectedState = $(this).val();
  var cities = $.grep(allCities, function(item, index) {
    return item.CountryID == selectedState;
  });
  // 基于cities的值构建选项
  // ... 使用 cities 数组渲染城市下拉菜单 ...
});</code>

Verwenden von nicht -invasivem JavaScript, um Mark und Verhalten zu trennen.

Verwenden Sie die erstellte Auxiliary -Methode (@url.action,@html.raw), um den Code zuversichtlich zu machen und eine harte Codierung zu vermeiden.

Diese wiedergegebene Reaktion behält die ursprüngliche Bedeutung bei der Verwendung verschiedener Wort- und Satzstrukturen bei

Das obige ist der detaillierte Inhalt vonWie kann ich das Laden von zwei abhängigen Dropdowns in MVC optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!