Wie kann ich abhängige Dropdowns (Bundesstaat und Stadt) in MVC mit unauffälligem JavaScript effizient laden?

optimierte den Plan zum Laden des doppelten Drop -Down -Menüs im MVC

Das Laden des staatlichen und urbanen Drop -Down -Menüs in der MVC -Anwendung erfordert traditionell die Kombination aus dem Controller -Betrieb und dem JavaScript -Code. Obwohl diese Methode effektiv ist, kann es langweilig und leicht Fehler machen. Lassen Sie uns eine effizientere und leistungsfähigere Möglichkeit erforschen, um mit dieser Aufgabe umzugehen.

Verwenden von Ansichtsmodellen und nicht -invasiven JavaScript

Anstatt das Down -Menü in der Ansicht zu codieren, ist es besser, ein Ansichtsmodell für alle erforderlichen Daten einzuführen. Darüber hinaus werden wir nicht -invasive JavaScript verwenden, um die Benutzererfahrung ohne Verschmutzungsmarkierung zu verbessern.

Ansicht Modell

Controller -Betrieb

<code class="language-csharp">public class PersonViewModel
{
    public int StateID { get; set; }
    public int CityID { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }
}</code>

Im Controller -Vorgang werden wir das Ansichtsmodell vorbereiten und es an die Ansicht übergeben.

Ansicht

In der Ansicht werden wir den Helfer

<code class="language-csharp">public ActionResult Index()
{
    var states = GetStates().Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.Name }).ToList();
    var cities = GetCities().Select(c => new SelectListItem { Value = c.Id.ToString(), Text = c.Name }).ToList();
    var model = new PersonViewModel
    {
        States = states,
        Cities = cities
    };

    return View(model);
}</code>

verwenden, um das Drop -Down -Menü zu präsentieren.

nicht -invasives JavaScript

@Html.DropDownList Mit JQuery können wir das Verhalten des staatlichen Drop -Down -Menüs verbessern und die Stadt dynamisch laden.

<code class="language-html">@model PersonViewModel

...

@Html.DropDownListFor(m => m.StateID, Model.States, "请选择州")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "请选择城市")

...</code>

Vorteile

Diese Methode bietet die folgenden Vorteile:

<code class="language-javascript">$(document).ready(function() {
    $("#StateID").change(function() {
        var stateId = $(this).val();
        $.ajax({
            url: '@Url.Action("GetCities", "Home")',
            data: { stateId: stateId },
            success: function(response) {
                var citiesDropdown = $('#CityID');
                citiesDropdown.empty();
                citiesDropdown.append($("<option></option>").attr("value", "").text("请选择城市")); // 添加默认选项
                $.each(response, function(index, city) {
                    citiesDropdown.append($("<option></option>").attr("value", city.Id).text(city.Name));
                });
            }
        });
    });
});</code>

Durch die Beseitigung des Betriebs mehrerer Controller wird die Komplexität des Codes verringert.

Aufgrund der Trennung des Fokus zwischen Ansichtsmodellen, Controllern und Ansichten verbessert es die Wartung.

Durch Verbesserung der Benutzererfahrung durch Laden von Städten im ausgewählten Zustand.

wesentlich Anfragen nur bei Bedarf zur Reduzierung der Serverlast.

Hinweis: Die obigen Codelclips gehen davon aus, dass die Methoden
• und
entsprechende Daten existierten und zurückgegeben haben, und
• und
-Objekte haben
• und
Eigenschaften. Die Verwendung von

hat auch die Option Drop -Down -Menü mit standardterem Menü bearbeitet. Wählen Sie nach dem Hinzufügen der Standardoption "die Stadt" und "Bitte wählen Sie den Status aus", um die Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich abhängige Dropdowns (Bundesstaat und Stadt) in MVC mit unauffälligem JavaScript effizient laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!