Erstellung eines Cascading Dropdown in ASP.NET MVC

Beim Erstellen von Webanwendungen ist es entscheidend, eine reibungslose und interaktive Benutzererfahrung zu bieten. Ein gängiges Benutzeroberflächenmuster ist das Cascading Dropdown—ein Dropdown-Menü, das seine Optionen basierend auf der Auswahl eines anderen Dropdowns aktualisiert. Diese Funktion ist besonders nützlich, wenn es um verwandte Datensätze geht. In diesem Blogbeitrag werden wir untersuchen, wie man ein Cascading Dropdown mit ASP.NET MVC und jQuery implementiert.

Verständnis des Problems

Sie fragen sich vielleicht, wie man effizient ein Cascading Dropdown in einer ASP.NET MVC-Anwendung erstellt. Häufig auftretende Fragen sind:

• Sollte man die Lösung mit jQuery erstellen oder sich auf das Microsoft AJAX-Toolkit verlassen?
• Ist es besser, einen Webdienst zu erstellen oder eine Controller-Aktion aufzurufen, um die abhängigen Daten zurückzugeben?

Historisch hatten Entwickler verschiedene Ansätze zur Implementierung dieser Funktion. Mit der nun in ASP.NET MVC integrierten jQuery neigt die bevorzugte Methode jedoch dazu, jQuery für ein optimiertes Erlebnis zu verwenden.

Schritt-für-Schritt-Lösung

Lassen Sie uns den Prozess in klare und überschaubare Abschnitte unterteilen, um Ihnen bei der Implementierung eines Cascading Dropdowns in Ihrer ASP.NET MVC-Anwendung zu helfen.

1. Richten Sie Ihr Projekt ein

Stellen Sie sicher, dass Sie ein ASP.NET MVC-Projekt mit integriertem jQuery eingerichtet haben. Dies können Sie ganz einfach mit den neuesten Visual Studio-Vorlagen erledigen.

2. Erstellen Sie Ihre Modelle

Wir benötigen ein paar Modelle, die die Daten repräsentieren, mit denen wir arbeiten. Angenommen, wir arbeiten mit den Modellen Country und City:

public class Country {
    public int CountryId { get; set; }
    public string CountryName { get; set; }
}

public class City {
    public int CityId { get; set; }
    public string CityName { get; set; }
    public int CountryId { get; set; } // Fremdschlüssel zum Land
}

3. Controller-Aktionen

Nächste Schritte sind die Einrichtung Ihres Controllers zur Handhabung der Anforderungen. Erstellen Sie Aktionen, die die Liste der Länder und die Städte basierend auf dem ausgewählten Land zurückgeben.

public class LocationController : Controller {
    public JsonResult GetCountries() {
        var countries = // Holen Sie sich Ihre Länder aus der Datenbank
        return Json(countries, JsonRequestBehavior.AllowGet);
    }
    
    public JsonResult GetCities(int countryId) {
        var cities = // Holen Sie sich Ihre Städte basierend auf countryId
        return Json(cities, JsonRequestBehavior.AllowGet);
    }
}

4. Erstellen der Views

In Ihrer Ansicht müssen Sie zwei Dropdowns hinzufügen: eines für das Land und eines für die Stadt. Beginnen Sie damit, die Länder zu laden, wenn die Ansicht gerendert wird:

<select id="countryDropdown"></select>
<select id="cityDropdown"></select>

5. Implementierung von jQuery für dynamisches Verhalten

Jetzt fügen wir jQuery-Code hinzu, um das Stadt-Dropdown basierend auf dem ausgewählten Land zu füllen.

$(document).ready(function() {
    $.getJSON('/Location/GetCountries', function(data) {
        $.each(data, function(index, item) {
            $('#countryDropdown').append($('<option>', { 
                value: item.CountryId,
                text : item.CountryName 
            }));
        });
    });

    $('#countryDropdown').change(function() {
        var countryId = $(this).val();
        $.getJSON('/Location/GetCities?countryId=' + countryId, function(data) {
            $('#cityDropdown').empty(); // Vorhandene Optionen löschen
            $.each(data, function(index, item) {
                $('#cityDropdown').append($('<option>', { 
                    value: item.CityId,
                    text : item.CityName 
                }));
            });
        });
    });
});

Fazit

Indem Sie diese Schritte befolgen, haben Sie ein vollständig funktionsfähiges Cascading Dropdown in Ihrer ASP.NET MVC-Anwendung. Dieser Ansatz verbessert die Benutzererfahrung, indem er abhängige Dropdown-Optionen basierend auf den Benutzerauswahlen dynamisch aktualisiert und die Notwendigkeit von Seitenaktualisierungen eliminiert.

Für detailliertere Ressourcen sollten Sie diesen Blogbeitrag prüfen, der zusätzlichen Kontext zu kaskadierenden Werten mit Formularen unter Verwendung von jQuery bietet.

Die Implementierung eines Cascading Dropdowns macht Ihre Anwendung nicht nur benutzerfreundlicher, sondern demonstriert auch die Kraft der Kombination von jQuery mit ASP.NET MVC für reichhaltige Interaktivität.