Freigeben über


Hinzufügen einer neuen Kategorie zu DropDownList mithilfe der jQuery-Benutzeroberfläche

von Rick Anderson

Das HTML-Tag Select eignet sich ideal für die Darstellung einer Liste fester Kategoriedaten, aber häufig müssen Sie eine neue Kategorie hinzufügen. Angenommen, wir möchten das Genre "Opera" zu den Kategorien in unserer Datenbank hinzufügen? In diesem Abschnitt verwenden wir jQuery UI, um ein Dialogfeld hinzuzufügen, das zum Hinzufügen einer neuen Kategorie verwendet werden kann. Die folgende Abbildung zeigt, wie die Benutzeroberfläche im Browser dargestellt wird.

Abbildung von U I in einem Browserfenster

Wenn ein Benutzer den Link "Neues Genre hinzufügen" auswählt, fordert ein Popupdialogfeld den Benutzer auf, einen neuen Genrenamen (und optional eine Beschreibung) einzugeben. Die folgende Abbildung zeigt das Popupdialogfeld "Genre hinzufügen".

Abbildung des Popupdialogfelds

Wenn ein neuer Genrename eingegeben wird und die Schaltfläche "Speichern " gedrückt wird, geschieht Folgendes:

  1. Ein AJAX-Aufruf sendet die Daten an die Create-Methode des Genrecontrollers, die das neue Genre in der Datenbank speichert und die neuen Genreinformationen (Genrename und ID) als JSON zurückgibt.

  2. JavaScript fügt der Auswahlliste die neuen Genredaten hinzu.

  3. JavaScript macht das neue Genre zum ausgewählten Element.

    In der abbildung unten wurde Opera der Datenbank hinzugefügt und in der Dropdownliste "Genre " ausgewählt.

Abbildung der Dropdownlistenauswahl

Öffnen Sie die Datei Views\StoreManager\Create.cshtml , und ersetzen Sie das Genremarkup durch den folgenden Code:

<div class="editor-field ui-widget">

     @Html.Partial("_ChooseGenre")

</div>

Die _ChooseGenre Teilansicht enthält alle Logik zum Verbinden von JavaScript und jQuery, die zum Implementieren des Neuen Genrefeatures verwendet werden. Nachdem wir den Code abgeschlossen haben, ist es einfach, dasselbe mit der Künstler-UI zu tun.

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Views\StoreManager", und wählen Sie "Hinzufügen" und dann "Anzeigen" aus. Geben Sie _ChooseGenre in der Eingabe des Ansichtsnamens die Option "Hinzufügen" ein. Ersetzen Sie das Markup in der Datei Views\StoreManager\_ChooseGenre.cshtml durch Folgendes:

@model MvcMusicStore.Models.Album

<div class="editor-label">

    @Html.LabelFor(model => model.GenreId, "Genre" )

</div>

@Html.DropDownList("GenreId", ViewBag.Genres as SelectList, String.Empty)

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

@Html.ValidationMessageFor(model => model.GenreId)

<div id="genreDialog" class="hidden">

</div>

<script src="@Url.Content( "~/Scripts/ui/jquery.ui.combobox.js" )"></script>

<script src="@Url.Content("~/Scripts/chooseGenre.js")"></script>

In der ersten Zeile wird deklariert, dass wir ein Album modellieren, genau die gleiche Modellausweisung, die in der Ansicht "Erstellen" gefunden wurde. Die nächsten Zeilen sind das Label-Hilfsmarkup . Die nächste Zeile ist der DropDownList-Hilfsaufruf , genau wie in der ursprünglichen Create-Ansicht. Die nächste Zeile fügt einen Link mit dem Namen Add New Genrehinzu und formatiert ihn wie eine Schaltfläche. Die Zeile, die enthält ValidationMessageFor , wird direkt aus der Ansicht "Erstellen" kopiert. Die folgenden Zeilen:

<div id="genreDialog" class="hidden">

</div>

erstellt ein ausgeblendetes div-Element mit der ID von genreDialog. Wir verwenden jQuery, um unser Dialogfeld "Genre hinzufügen" mit der ID genreDialog in diesem div-Element zu verbinden. Die letzten beiden Skripttags enthalten Links zu den JavaScript-Dateien, die wir verwenden werden, um das Feature zum Hinzufügen eines neuen Genres zu implementieren. Die Datei "/Scripts/chooseGenre.js " wird für Sie im Projekt bereitgestellt, wir werden sie später im Lernprogramm untersuchen.

Führen Sie die Anwendung aus, und klicken Sie auf die Schaltfläche "Neues Genre hinzufügen". Geben Sie im Dialogfeld "Genre hinzufügen" "Opera" in das Eingabefeld "Name" ein.

Abbildung des Dialogfelds

Klicken Sie auf die Schaltfläche Speichern. Ein AJAX-Aufruf erstellt die Opera-Kategorie und füllt dann die Dropdownliste mit Opera auf und legt Opera als ausgewähltes Genre fest.

Abbildung der aufgefüllten Dropdownliste

Geben Sie einen Künstler, Titel und Preis ein, und wählen Sie dann die Schaltfläche "Erstellen " aus. Wenn Sie einen Preis unter 8,99 $ eingeben, wird das neue Album oben in der Indexansicht angezeigt. Überprüfen Sie, ob der neue Albumeintrag in der Datenbank gespeichert wurde.

Bild, das überprüft, ob der neue Albumeintrag in der Datenbank gespeichert wurde

Versuchen Sie, ein neues Genre mit nur einem Buchstaben zu erstellen. Der folgende Code in der Datei Models\Genre.cs legt die minimale und maximale Länge des Genrenamens fest.

[StringLength(20, MinimumLength = 2)]
public string Name { get; set; }

Clientseitige Überprüfungsberichte müssen eine Zeichenfolge zwischen 2 und 20 Zeichen eingeben.

Abbildung der clientseitigen Überprüfung

Untersuchen, wie ein neues Genre der Datenbank und der Auswahlliste hinzugefügt wird.

Öffnen Sie die Skripts\chooseGenre.js Datei, und überprüfen Sie den Code.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

                $(this).dialog('close');

            }

        }

    });

In der zweiten Zeile wird die ID genreDialog verwendet, um ein Dialogfeld im div-Tag in der Datei Views\StoreManager\_ChooseGenre.cshtml zu erstellen. Die meisten benannten Parameter sind selbsterklärend. Der autoOpen Parameter ist auf "false" festgelegt. Wenn Sie die Schaltfläche "Genre erstellen" auswählen, wird der Dialog explizit geöffnet (dies wird letzteres beschrieben). Das Dialogfeld enthält zwei Schaltflächen: "Speichern" und "Abbrechen". Mit der Schaltfläche "Abbrechen " wird das Dialogfeld geschlossen. Der folgende Code zeigt die Schaltflächenfunktion "Speichern ".

'Save': function () {

    var createGenreForm = $('#createGenreForm');

    if (createGenreForm.valid()) {

        $.post(createGenreForm.attr('action'), createGenreForm.serialize(), function (data) {

            if (data.Error != '') {

                alert(data.Error);

            }

            else {

                // Add the new genre to the dropdown list and select it

                $('#GenreId').append(

                        $('<option></option>')

                            .val(data.Genre.GenreId)

                            .html(data.Genre.Name)

                            .prop('selected', true)  // Selects the new Genre in the DropDown LB

                    );

                $('#genreDialog').dialog('close');

            }

        });

    }

},

Die var createGenreForm Option wird aus der createGenreForm ID ausgewählt. Die createGenreForm ID wurde im folgenden Code festgelegt, der in der Datei Views\Genre\_CreateGenre.cshtml gefunden wurde.

@model MvcMusicStore.Models.Genre

@using (Html.BeginForm("Create", "Genre", FormMethod.Post, new { id = "createGenreForm" }))

{

    @*Omitted for clarity.*@

}

Die html.BeginForm-Hilfsüberladung , die in der Datei Views\Genre\_CreateGenre.cshtml verwendet wird, generiert HTML mit einem Aktionsattribute, das die URL zum Senden des Formulars enthält. Sie können dies sehen, indem Sie die Seite zum Erstellen eines Albums in einem Browser anzeigen und die Quelle im Browser auswählen. Das folgende Markup zeigt den generierten HTML-Code, der das Formulartag enthält.

<form action="/StoreManager/Create" method="post">

Die jQuery-Zeile $.post führt einen AJAX-Aufruf an das Aktionsattribut (/StoreManager/Create) durch und übergibt die Daten aus dem Dialogfeld "Genre erstellen". Die Daten bestehen aus dem Namen für das neue Genre und einer optionalen Beschreibung. Wenn der AJAX-Aufruf erfolgreich ist, werden der neue Genrename und -wert dem Select-Markup hinzugefügt, und das neue Genre wird auf den ausgewählten Wert festgelegt. Da das markup dynamisch generiert wird, können Sie die neue Auswahloption nicht anzeigen, indem Sie die Quelle im Browser anzeigen. Sie können den neuen HTML-Code mit den IE 9 F12-Entwicklertools sehen. Um die neue Auswahloption anzuzeigen, drücken Sie in Internet Explorer 9 die F12-TASTE, um die F12-Entwicklertools zu starten. Navigieren Sie zur Seite "Erstellen", und fügen Sie ein neues Genre hinzu, damit das neue Genre in der Liste der Genreauswahl ausgewählt ist. In den F12-Entwicklertools:

  1. Wählen Sie die Registerkarte HTML aus.

  2. Drücken Sie das Aktualisierungssymbol.
    Abbildung der Symbolauswahl für

  3. Geben Sie im Suchfeld GenreID ein.

  4. Verwenden des nächsten Symbols
    Abbildung der nächsten Symbolauswahl
    navigieren Sie zum folgenden Auswahltag:

    <select name="GenreId" id="GenreId" >
    
  5. Erweitern Sie den letzten Optionswert.

Abbildung der erweiterten Ansicht

Der folgende Code in der Datei Scripts\chooseGenre.js zeigt, wie die Schaltfläche "Neues Genre hinzufügen" mit dem Klickereignis verbunden wird und wie das Dialogfeld "Neues Genre hinzufügen" erstellt wird.

$('#genreAddLink').click(function () {

    var createFormUrl = $(this).attr('href');  

    $('#genreDialog').html('')

    .load(createFormUrl, function () {  

        // The createGenreForm is loaded on the fly using jQuery load. 

        // In order to have client validation working it is necessary to tell the 

        // jQuery.validator to parse the newly added content

        jQuery.validator.unobtrusive.parse('#createGenreForm');

        $('#genreDialog').dialog('open');

    });

    return false;

});

Die erste Zeile erstellt eine Klickfunktion, die der Schaltfläche "Neues Genre hinzufügen" zugeordnet ist. Das folgende Markup aus der Datei Views\StoreManager\_ChooseGenre.cshtml zeigt, wie die Schaltfläche "Neues Genre hinzufügen" erstellt wird:

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

Die Lademethode erstellt und öffnet das Dialogfeld "Genre hinzufügen" und ruft die jQuery-Methode parse auf, sodass die Clientüberprüfung für im Dialogfeld eingegebene Daten erfolgt.

In diesem Abschnitt haben Sie erfahren, wie Sie ein Dialogfeld erstellen, das zum Hinzufügen neuer Kategoriedaten zu einer Auswahlliste verwendet werden kann. Sie können dasselbe Verfahren ausführen, um eine Benutzeroberfläche zu erstellen, um der Auswahlliste des Künstlers einen neuen Künstler hinzuzufügen. Dieses Lernprogramm hat eine Übersicht über das Arbeiten mit dem ASP.NET MVC HTML-Hilfsprogramm DropDownList gegeben. Weitere Informationen zum Arbeiten mit der DropDownList finden Sie im Abschnitt "Ergänzungsverweise" weiter unten. Bitte teilen Sie uns mit, ob dieses Lernprogramm hilfreich war.

Zusätzliche Referenzen

Beitragende

Reviewer

  • Jean-Sébastien Goupil
  • Brad Wilson
  • Mike Pope
  • Tom Dykstra