Freigeben über

Verwenden des DropDownList-Hilfsprogramms mit ASP.NET MVC

  • Artikel

von Rick Anderson

In diesem Tutorial lernen Sie die Grundlagen der Arbeit mit dem DropDownList-Hilfsprogramm und dem ListBox-Hilfsprogramm in einer ASP.NET MVC-Webanwendung kennen. Sie können Microsoft Visual Web Developer 2010 Express Service Pack 1 verwenden, eine kostenlose Version von Microsoft Visual Studio, um das Tutorial zu befolgen. Bevor Sie beginnen, stellen Sie sicher, dass Sie die unten aufgeführten Voraussetzungen installiert haben. Sie können alle installieren, indem Sie auf den folgenden Link klicken: Webplattform-Installer. Alternativ können Sie die Voraussetzungen mithilfe der folgenden Links einzeln installieren:

Wenn Sie Visual Studio 2010 anstelle von Visual Web Developer 2010 verwenden, installieren Sie die Voraussetzungen, indem Sie auf den folgenden Link klicken: Visual Studio 2010-Voraussetzungen. In diesem Tutorial wird davon ausgegangen, dass Sie das Tutorial "Einführung in ASP.NET MVC" oder dasTutorial ASP.NET MVC Music Store abgeschlossen haben oder mit ASP.NET MVC-Entwicklung vertraut sind. Dieses Tutorial beginnt mit einem geänderten Projekt aus dem ASP.NET MVC Music Store-Tutorial .

Für dieses Thema steht ein Visual Web Developer-Projekt mit dem abgeschlossenen C#-Quellcode des Tutorials zur Verfügung. Herunterladen.

Sie lernen Folgendes

Sie erstellen Aktionsmethoden und Ansichten, die das DropDownList-Hilfsprogramm verwenden, um eine Kategorie auszuwählen. Sie verwenden jQuery auch, um ein Dialogfeld "Kategorie einfügen" hinzuzufügen, das verwendet werden kann, wenn eine neue Kategorie (z. B. Genre oder Künstler) benötigt wird. Unten sehen Sie einen Screenshot der Ansicht Erstellen mit Links zum Hinzufügen eines neuen Genres und hinzufügen eines neuen Künstlers.

Bild mit Dropdownlistenhilfsprogramm

Erlernte Fertigkeiten

Folgendes können Sie lernen:

  • Verwenden des DropDownList-Hilfsprogramms zum Auswählen von Kategoriedaten
  • So fügen Sie ein jQuery-Dialogfeld hinzu, um neue Kategorien hinzuzufügen.

Erste Schritte

Laden Sie zunächst das Starterprojekt mit dem folgenden Link herunterladen herunter. Klicken Sie in Windows Explorer mit der rechten Maustaste auf die DDL_Starter.zip-Datei, und wählen Sie Eigenschaften aus. Wählen Sie im Dialogfeld eigenschaftenDDL_Starter.zip die Option Blockierung aufheben aus.

Abbildung des Eigenschaftendialogfelds

Klicken Sie mit der rechten Maustaste auf die datei DDL_Starter.zip, und wählen Sie Alle extrahieren aus, um die Datei zu entzippen. Öffnen Sie die Datei StartMusicStore.sln mit Visual Web Developer 2010 Express ("Visual Web Developer" oder kurz "VWD") oder Visual Studio 2010.

Drücken Sie STRG+F5, um die Anwendung auszuführen, und klicken Sie auf den Link Testen .

Abbildung des Anwendungstestlinks

Wählen Sie den Link Filmkategorie auswählen (Einfach) aus. Es wird eine Filmtypauswahlliste angezeigt, wobei Comedy den ausgewählten Wert aufweist.

Bild der Auswahlliste des Filmtyps

Klicken Sie mit der rechten Maustaste in den Browser, und wählen Sie Quelle anzeigen aus. Der HTML-Code für die Seite wird angezeigt. Der folgende Code zeigt den HTML-Code für das select-Element.

<form action="/Home/CategoryChosen" method="get">

<fieldset>Movie Type <select id="MovieType" name="MovieType">

<option value=""></option>

<option value="0">Action</option>

<option value="1">Drama</option>

<option selected="selected" value="2">Comedy</option>

<option value="3">Science Fiction</option>

</select>

<p><input type="submit" value="Submit" /> </p>

</fieldset>

</form>

Sie können sehen, dass jedes Element in der Auswahlliste über einen Wert (0 für Action, 1 für Drama, 2 für Komödie und 3 für Science Fiction) und einen Anzeigenamen (Action, Drama, Comedy und Science Fiction) verfügt. Der obige Code ist Standard-HTML für eine Auswahlliste.

Ändern Sie die Auswahlliste in Drama, und klicken Sie auf die Schaltfläche Senden . Die URL im Browser lautet http://localhost:2468/Home/CategoryChosen?MovieType=1 , und auf der Seite Wird ausgewählt angezeigt: 1.

Abbildung von U R L im Browser

Öffnen Sie die Datei Controllers\HomeController.cs, und untersuchen Sie die SelectCategory Methode.

public ActionResult SelectCategory() {

     List<SelectListItem> items = new List<SelectListItem>();

     items.Add(new SelectListItem { Text = "Action", Value = "0"});

     items.Add(new SelectListItem { Text = "Drama", Value = "1" });

     items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });

     items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });

     ViewBag.MovieType = items;

     return View();

 }

Das DropDownList-Hilfsprogramm zum Erstellen einer HTML-Auswahlliste erfordert ein IEnumerable<SelectListItem >, entweder explizit oder implizit. Das heißt, Sie können das IEnumerable<SelectListItem > explizit an das DropDownList-Hilfsprogramm übergeben, oder Sie können das IEnumerable<SelectListItem > dem ViewBag mit demselben Namen für selectListItem wie die Modelleigenschaft hinzufügen. Das implizite und explizite Übergeben von SelectListItem wird im nächsten Teil des Tutorials behandelt. Der obige Code zeigt die einfachste Möglichkeit, ein IEnumerable<SelectListItem > zu erstellen und mit Text und Werten aufzufüllen. Beachten Sie, dass selectListItemComedy die Selected-Eigenschaft auf true festgelegt hat. Dadurch wird in der gerenderten Auswahlliste Comedy als ausgewähltes Element in der Liste angezeigt.

Das oben erstellte IEnumerable<SelectListItem > wird dem ViewBag mit dem Namen MovieType hinzugefügt. So übergeben wir das IEnumerable<SelectListItem > implizit an das unten gezeigte DropDownList-Hilfsprogramm .

Öffnen Sie die Datei Views\Home\SelectCategory.cshtml , und untersuchen Sie das Markup.

@{

    ViewBag.Title = "Category Select";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {

    <fieldset>

            Movie Type

            @Html.DropDownList("MovieType")

        <p>

            <input type="submit" value="Submit" />

        </p>

    </fieldset>

}

In der dritten Zeile legen wir das Layout auf Views/Shared/_Simple_Layout.cshtml fest, eine vereinfachte Version der Standardlayoutdatei. Dies geschieht, um die Anzeige und das gerenderte HTML einfach zu halten.

In diesem Beispiel ändern wir den Status der Anwendung nicht, sodass wir die Daten mit einem HTTP GET und nicht mit HTTP POST übermitteln. Weitere Informationen finden Sie im W3C-Abschnitt Schnellprüfliste für die Auswahl von HTTP GET oder POST. Da wir die Anwendung nicht ändern und das Formular veröffentlichen, verwenden wir die Html.BeginForm-Überladung , mit der wir die Aktionsmethode, den Controller und die Formularmethode (HTTP POST oder HTTP GET) angeben können. In der Regel enthalten Ansichten die Html.BeginForm-Überladung , die keine Parameter benötigt. Die Version ohne Parameter schreibt standardmäßig die Formulardaten an die POST-Version derselben Aktionsmethode und desselben Controllers.

Die folgende Zeile

@Html.DropDownList("MovieType")

übergibt ein Zeichenfolgenargument an das DropDownList-Hilfsprogramm . Diese Zeichenfolge, "MovieType" in unserem Beispiel, erfüllt zwei Dinge:

  • Es stellt den Schlüssel für das DropDownList-Hilfsprogramm bereit, um ein IEnumerable<SelectListItem > im ViewBag zu finden.
  • Es ist an das MovieType-Formularelement datengebunden. Wenn die Submit-Methode HTTP GET ist, MovieType handelt es sich um eine Abfragezeichenfolge. Wenn die Submit-Methode HTTP POST ist, MovieType wird dem Nachrichtentext hinzugefügt. Die folgende Abbildung zeigt die Abfragezeichenfolge mit dem Wert 1.

Abbildung der Abfragezeichenfolge mit dem Wert 1

Der folgende Code zeigt die Methode, CategoryChosen an die das Formular gesendet wurde.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Navigieren Sie zurück zur Testseite, und wählen Sie den Link HTML SelectList aus. Die HTML-Seite rendert ein Select-Element ähnlich der einfachen ASP.NET MVC-Testseite. Klicken Sie mit der rechten Maustaste auf das Browserfenster, und wählen Sie Quelle anzeigen aus. Das HTML-Markup für die Auswahlliste ist im Wesentlichen identisch. Testen Sie die HTML-Seite, sie funktioniert wie die ASP.NET MVC-Aktionsmethode und -Ansicht, die wir zuvor getestet haben.

Verbessern der Filmauswahlliste mit Enumerationen

Wenn die Kategorien in Ihrer Anwendung behoben sind und sich nicht ändern, können Sie die Vorteile von Enumerationen nutzen, um Ihren Code robuster und einfacher zu erweitern. Wenn Sie eine neue Kategorie hinzufügen, wird der richtige Kategoriewert generiert. Das vermeidet Fehler beim Kopieren und Einfügen, wenn Sie eine neue Kategorie hinzufügen, vergessen jedoch, den Kategoriewert zu aktualisieren.

Öffnen Sie die Datei Controllers\HomeController.cs , und untersuchen Sie den folgenden Code:

public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };

private void SetViewBagMovieType(eMovieCategories selectedMovie) {

    IEnumerable<eMovieCategories> values = 

                      Enum.GetValues(typeof(eMovieCategories))

                      .Cast<eMovieCategories>();

    IEnumerable<SelectListItem> items =

        from value in values

        select new SelectListItem

        {

            Text = value.ToString(),

            Value = value.ToString(),

            Selected = value == selectedMovie,

        };

    ViewBag.MovieType = items;

}

public ActionResult SelectCategoryEnum() {

    SetViewBagMovieType(eMovieCategories.Drama);

    return View("SelectCategory");

}

Die EnumerationeMovieCategories erfasst die vier Filmtypen. Die SetViewBagMovieType -Methode erstellt das IEnumerable<SelectListItem > aus der eMovieCategoriesEnumeration und legt die Selected -Eigenschaft aus dem selectedMovie -Parameter fest. Die SelectCategoryEnum Aktionsmethode verwendet dieselbe Ansicht wie die SelectCategory Aktionsmethode.

Navigieren Sie zur Seite Test, und klicken Sie auf den Select Movie Category (Enum) Link. Dieses Mal wird anstelle eines Werts (Zahl) eine Zeichenfolge angezeigt, die die Enumeration darstellt.

Posten von Enumerationswerten

HTML-Formulare werden in der Regel verwendet, um Daten auf dem Server zu posten. Der folgende Code zeigt die HTTP GET - und HTTP POST -Versionen der SelectCategoryEnumPost -Methode.

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Durch Übergeben einer eMovieCategories Enumeration an die POST -Methode können wir sowohl den Enumerationswert als auch die Enumerationszeichenfolge extrahieren. Führen Sie das Beispiel aus, und navigieren Sie zur Seite Test. Klicken Sie auf den Select Movie Category(Enum Post) Link. Wählen Sie einen Filmtyp aus, und klicken Sie dann auf die Schaltfläche Senden. Die Anzeige zeigt sowohl den Wert als auch den Namen des Filmtyps an.

Bild des Werts und namens des Filmtyps

Erstellen eines Multiple Section Select-Elements

Das ListBox-HTML-Hilfsprogramm rendert das HTML-Element <select> mit dem multiple -Attribut, sodass benutzer mehrere Auswahlen treffen können. Navigieren Sie zum Link Test, und wählen Sie dann den Link Multi Select Country aus . Mit der gerenderten Benutzeroberfläche können Sie mehrere Länder auswählen. In der abbildung unten sind Kanada und China ausgewählt.

Abbildung der Dropdownliste

Untersuchen des MultiSelectCountry-Codes

Untersuchen Sie den folgenden Code aus der Datei Controller\HomeController.cs .

private MultiSelectList GetCountries(string[] selectedValues) {

    List<Country> Countries = new List<Country>()

        {

            new Country() { ID = 1, Name= "United States" },

            new Country() { ID = 2, Name= "Canada" },

            new Country() { ID = 3, Name= "UK" },

            new Country() { ID = 4, Name= "China" },

            new Country() { ID = 5, Name= "Japan" }

        };

    return new MultiSelectList(Countries, "ID", "Name", selectedValues);

}

public ActionResult MultiSelectCountry() {

    ViewBag.Countrieslist = GetCountries(null);

    return View();

}

Die GetCountries Methode erstellt eine Liste von Ländern und übergibt sie dann an den MultiSelectList Konstruktor. Die MultiSelectList in der obigen GetCountries Methode verwendete Konstruktorüberladung benötigt vier Parameter:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: Eine IEnumerable , die die Elemente in der Liste enthält. Im obigen Beispiel die Liste der Länder.
  2. dataValueField: Der Name der Eigenschaft in der Liste IEnumerable , die den Wert enthält. Im obigen Beispiel die ID -Eigenschaft.
  3. dataTextField: Der Name der Eigenschaft in der Liste IEnumerable , die die anzuzeigenden Informationen enthält. Im obigen Beispiel die name -Eigenschaft.
  4. selectedValues: Die Liste der ausgewählten Werte.

Im obigen Beispiel übergibt die MultiSelectCountry Methode einen null Wert für die ausgewählten Länder, sodass keine Länder ausgewählt werden, wenn die Benutzeroberfläche angezeigt wird. Der folgende Code zeigt das Razor-Markup, das zum Rendern der MultiSelectCountry Ansicht verwendet wird.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

        <div class="editor-field">

            @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

            )

        </div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

Die oben verwendete ListBox-Methode des HTML-Hilfsprogramms verwendet zwei Parameter: den Namen der Eigenschaft zum Modellbindung und die MultiSelectList , die die Auswahloptionen und -werte enthält. Der ViewBag.YouSelected obige Code wird verwendet, um die Werte der Länder anzuzeigen, die Sie beim Absenden des Formulars ausgewählt haben. Untersuchen Sie die HTTP POST-Überladung der MultiSelectCountry -Methode.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

    ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));

    return View();

}

Die ViewBag.YouSelected dynamische Eigenschaft enthält die ausgewählten Länder, die für den Countries Eintrag in der Formularauflistung abgerufen wurden. In dieser Version wird der GetCountries-Methode eine Liste der ausgewählten Länder übergeben. Wenn die MultiSelectCountry Ansicht angezeigt wird, werden die ausgewählten Länder auf der Benutzeroberfläche ausgewählt.

Benutzerfreundlichkeit eines Select-Elements mit dem Harvest Chosen jQuery-Plug-In

Das Harvest Chosen jQuery-Plug-In kann einem HTML-Select-Element <> hinzugefügt werden, um eine benutzerfreundliche Benutzeroberfläche zu erstellen. Die folgenden Bilder zeigen das Harvest Chosen jQuery-Plug-In mit MultiSelectCountry Ansicht.

Abbildung des Harvest Chosen j Query-Plug-Ins

In den beiden folgenden Bildern ist Kanada ausgewählt.

Bild von Kanada ausgewählt

Bild von Kanada, ausgewählt mit dem zu entfernenden X

In der obigen Abbildung ist Kanada ausgewählt, und es enthält ein x , auf das Sie klicken können, um die Auswahl zu entfernen. Die folgende Abbildung zeigt Kanada, China und Japan ausgewählt.

Bild von Kanada China und Japan ausgewählt

Einbinden des Harvest Chosen jQuery-Plug-Ins

Der folgende Abschnitt ist einfacher zu befolgen, wenn Sie erfahrung mit jQuery haben. Wenn Sie jQuery noch nie verwendet haben, sollten Sie eines der folgenden jQuery-Tutorials ausprobieren.

Das Ausgewählte Plug-In ist in den Starter- und abgeschlossenen Beispielprojekten enthalten, die dieses Tutorial begleiten. Für dieses Tutorial müssen Sie nur jQuery verwenden, um es mit der Benutzeroberfläche zu verbinden. Um das Harvest Chosen jQuery-Plug-In in einem ASP.NET MVC-Projekt zu verwenden, müssen Sie:

  1. Laden Sie das ausgewählte Plug-In von github herunter. Dieser Schritt wurde für Sie ausgeführt.
  2. Fügen Sie ihrem ASP.NET MVC-Projekt den Ordner Ausgewählt hinzu. Fügen Sie die Objekte aus dem ausgewählten Plug-In, das Sie im vorherigen Schritt heruntergeladen haben, dem Ordner "Ausgewählt" hinzu. Dieser Schritt wurde für Sie ausgeführt.
  3. Verbinden Sie das ausgewählte Plug-In mit dem DropDownList- oder ListBox-HTML-Hilfsprogramm.

Verbinden des ausgewählten Plug-Ins mit der MultiSelectCountry-Ansicht.

Öffnen Sie die Datei Views\Home\MultiSelectCountry.cshtml , und fügen Sie einen htmlAttributesHtml.ListBoxParameter hinzu. Der von Ihnen hinzugefügte Parameter enthält einen Klassennamen für select list(@class = "chzn-select"). Der vollständige Code ist unten dargestellt:

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Im obigen Code fügen wir das HTML-Attribut und den Attributwert class = "chzn-select"hinzu. Das @-Zeichen vor der Klasse hat nichts mit der Razor-Ansichts-Engine zu tun. classist ein C#-Schlüsselwort (keyword). C#-Schlüsselwörter können nicht als Bezeichner verwendet werden, es sei denn, sie enthalten @ als Präfix. Im obigen Beispiel ist ein gültiger Bezeichner, @class aber die Klasse nicht, weil die Klasse ein Schlüsselwort (keyword) ist.

Fügen Sie Verweise auf die Dateien Chosen/chosen.jquery.js und Chosen/chosen.css hinzu. Das Ausgewählte/chosen.jquery.js und implementiert das Funktional des Gewählten Plug-Ins. Die Datei Chosen/chosen.css bietet das Formatieren. Fügen Sie diese Verweise unten in der Datei Views\Home\MultiSelectCountry.cshtml hinzu. Der folgende Code zeigt, wie Sie auf das ausgewählte Plug-In verweisen.

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

Aktivieren Sie das Ausgewählte Plug-In mithilfe des Klassennamens, der im Html.ListBox-Code verwendet wird. Im obigen Beispiel lautet chzn-selectder Klassenname . Fügen Sie unten in der Ansichtsdatei Views\Home\MultiSelectCountry.cshtml die folgende Zeile hinzu. Diese Zeile aktiviert das ausgewählte Plug-In.

<script >    $(".chzn-select").chosen(); </script>  @*Hookup Chosen Plugin*@

Die folgende Zeile ist die Syntax zum Aufrufen der jQuery ready-Funktion, die das DOM-Element mit dem Klassennamen chzn-selectauswählt.

$(".chzn-select")

Der umschlossene Satz, der vom obigen Aufruf zurückgegeben wird, wendet dann die ausgewählte Methode (.chosen();) an, die das Ausgewählte Plug-In anhängt.

Der folgende Code zeigt die abgeschlossene Ansichtsdatei Views\Home\MultiSelectCountry.cshtml .

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select"

     }

    )

</div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

<script >    $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@

Führen Sie die Anwendung aus, und navigieren Sie zur MultiSelectCountry Ansicht. Versuchen Sie, Länder hinzuzufügen und zu löschen. Der bereitgestellte Beispieldownload enthält auch eine Methode und Ansicht MultiCountryVM , die die MultiSelectCountry-Funktionalität mithilfe eines Ansichtsmodells anstelle eines ViewBag implementiert.

Im nächsten Abschnitt sehen Sie, wie der ASP.NET MVC-Gerüstmechanismus mit dem DropDownList-Hilfsprogramm funktioniert.

Nächste