Freigeben über

Verwenden des DropDownList-Hilfsprogramms mit ASP.NET MVC

  • Artikel

von Rick Anderson

Dieses Lernprogramm vermittelt Ihnen die Grundlagen der Arbeit mit dem DropDownList-Hilfsprogramm und dem ListBox-Hilfsprogramm in einer ASP.NET MVC-Webanwendung. Sie können Microsoft Visual Web Developer 2010 Express Service Pack 1 verwenden, bei dem es sich um eine kostenlose Version von Microsoft Visual Studio handelt, um dem Lernprogramm zu folgen. 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: Web Platform Installer. Alternativ können Sie die erforderlichen Komponenten mit den folgenden Links einzeln installieren:

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

Ein Visual Web Developer-Projekt mit dem abgeschlossenen Lernprogramm C#-Quellcode steht diesem Thema zur Verfügung. Herunterladen.

Sie lernen Folgendes

Sie erstellen Aktionsmethoden und Ansichten, die das DropDownList-Hilfsprogramm zum Auswählen einer Kategorie verwenden. Sie verwenden jQuery auch, um ein Dialogfeld zum Einfügen einer Kategorie 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", in der Links zum Hinzufügen eines neuen Genres und zum Hinzufügen eines neuen Künstlers angezeigt werden.

Bild mit Dropdownlistenhilfsprogramm

Erlernte Fertigkeiten

Folgendes können Sie lernen:

  • Verwenden der DropDownList-Hilfsprogramm 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 Startprojekt mit dem folgenden Link herunter. Klicken Sie im Windows-Explorer mit der rechten Maustaste auf die DDL_Starter.zip Datei, und wählen Sie Eigenschaften aus. Wählen Sie im Dialogfeld DDL_Starter.zip Eigenschaften die Option "Blockierung aufheben" aus.

Abbildung des Eigenschaftendialogfelds

Klicken Sie mit der rechten Maustaste auf die DDL_Starter.zip Datei, 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 "VWD" für kurze Zeit) 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. Eine Filmtypauswahlliste wird mit dem ausgewählten Wert "Comedy" angezeigt.

Abbildung der Auswahlliste des Filmtyps

Klicken Sie mit der rechten Maustaste in den Browser, und wählen Sie die Ansichtsquelle 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 einen Wert (0 für Action, 1 für Drama, 2 für Comedy und 3 für Science Fiction) und einen Anzeigenamen (Action, Drama, Comedy und Science Fiction) aufweist. Der obige Code ist Standard-HTML für eine Auswahlliste.

Ändern Sie die Auswahlliste in Drama, und drücken Sie die Schaltfläche "Absenden ". Die URL im Browser ist http://localhost:2468/Home/CategoryChosen?MovieType=1 und die Seite zeigt "Sie ausgewählt" an : 1.

Abbildung von U R L im Browser

Öffnen Sie die Datei "Controller\HomeController.cs ", und überprüfen 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"-Objekt >, 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-Objekt > dem ViewBag hinzufügen, indem Sie denselben Namen für das SelectListItem-Objekt wie die Modelleigenschaft verwenden. Die implizite und explizite Übergabe des SelectListItem wird im nächsten Teil des Lernprogramms behandelt. Der obige Code zeigt die einfachste Möglichkeit, ein IEnumerable<SelectListItem-Objekt > zu erstellen und mit Text und Werten aufzufüllen. Beachten Sie, dass die ComedySelectListItem-Eigenschaft auf "true" festgelegt ist. Dadurch wird die gerenderte 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 überprüfen 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, bei dem es sich um eine vereinfachte Version der Standardlayoutdatei handelt. Wir tun dies, um die Anzeige und das gerenderte HTML einfach zu halten.

In diesem Beispiel ändern wir nicht den Status der Anwendung, daher übermitteln wir die Daten mithilfe eines HTTP-GET und nicht mit HTTP POST. Weitere Informationen zum Auswählen von HTTP GET oder POST finden Sie im Abschnitt "W3C". 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 akzeptiert. Die No-Parameter-Version stellt standardmäßig die Formulardaten in der POST-Version derselben Aktionsmethode und desselben Controllers bereit.

Die folgende Zeile

@Html.DropDownList("MovieType")

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

  • Es stellt den Schlüssel für die DropDownList-Hilfsprogramm bereit, um ein IEnumerable<SelectListItem > im ViewBag zu finden.
  • Es ist datengebunden an das MovieType-Formularelement. Wenn die Submit-Methode HTTP GET ist, MovieType handelt es sich um eine Abfragezeichenfolge. Wenn die Submit-Methode HTTP POST ist, MovieType wird im 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 HTML-SelectList-Link aus. Die HTML-Seite rendert ein ausgewähltes Element ähnlich der einfachen ASP.NET MVC-Testseite. Klicken Sie mit der rechten Maustaste auf das Browserfenster, und wählen Sie die Ansichtsquelle aus. Das HTML-Markup für die Auswahlliste ist im Wesentlichen identisch. Testen Sie die HTML-Seite, funktioniert sie 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 Enumerationen nutzen, um Ihren Code robuster und einfacher zu erweitern. Wenn Sie eine neue Kategorie hinzufügen, wird der richtige Kategoriewert generiert. Dies verhindert Kopier- und Einfügefehler, wenn Sie eine neue Kategorie hinzufügen, aber vergessen, den Kategoriewert zu aktualisieren.

Öffnen Sie die Datei "Controller\HomeController.cs ", und überprüfen 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 Enumeration eMovieCategories 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. Diesmal 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 veröffentlichen. 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 drücken Sie dann die Schaltfläche "Absenden". Die Anzeige zeigt sowohl den Wert als auch den Namen des Filmtyps an.

Abbildung des Werts und des Namens des Filmtyps

Erstellen eines Mehrfachabschnittauswahlelements

Das HTML-Hilfsprogramm "ListBox " rendert das HTML-Element <select> mit dem multiple Attribut, mit dem benutzer mehrere Auswahlmöglichkeiten treffen können. Navigieren Sie zum Link "Test", und wählen Sie dann den Link "Land für mehrfach auswählen" 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

Überprüfen 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 GetCountries obigen Methode verwendete Konstruktorüberladung verwendet vier Parameter:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: An IEnumerable containing the items in the list. Im obigen Beispiel wird die Liste der Länder aufgeführt.
  2. dataValueField: Der Name der Eigenschaft in der Liste "IEnumerable", die den Wert enthält. Im obigen Beispiel wird die ID Eigenschaft verwendet.
  3. dataTextField: Der Name der Eigenschaft in der Liste "IEnumerable ", die die anzuzeigenden Informationen enthält. Im obigen Beispiel wird die name Eigenschaft verwendet.
  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 HTML-Hilfsmethode ListBox akzeptiert zwei Parameter, den Namen der Eigenschaft zum Modellbindung und die MultiSelectList mit den Auswahloptionen und Werten. Der ViewBag.YouSelected obige Code wird verwendet, um die Werte der Länder anzuzeigen, die Sie ausgewählt haben, wenn Sie das Formular übermitteln. Überprüfen 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 Formularsammlung abgerufen werden. In dieser Version wird die GetCountries-Methode eine Liste der ausgewählten Länder übergeben. Wenn die MultiSelectCountry Ansicht angezeigt wird, werden die ausgewählten Länder in der Benutzeroberfläche ausgewählt.

Benutzerfreundliches Auswählen-Element mit dem ausgewählten jQuery-Plug-In "Harvest"

Das Harvest Chosen jQuery-Plug-In kann einem HTML-Auswahlelement <> 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 abbildungen unten ist Kanada ausgewählt.

Bild von Kanada ausgewählt

Bild von Kanada, das mit X ausgewählt ist, das entfernt werden soll

In der abbildung oben ist Kanada ausgewählt und 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-Lernprogramme ausprobieren.

Das ausgewählte Plug-In ist in den Start- und abgeschlossenen Beispielprojekten enthalten, die dieses Lernprogramm begleiten. In diesem Lernprogramm 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 dem ASP.NET MVC-Projekt den Ordner "Ausgewählt" hinzu. Fügen Sie die Ressourcen aus dem ausgewählten Plug-In hinzu, das Sie im vorherigen Schritt zum ausgewählten Ordner heruntergeladen haben. Dieser Schritt wurde für Sie ausgeführt.
  3. Verbinden Sie das ausgewählte Plug-In mit dem Html-Hilfsprogramm "DropDownList " oder "ListBox ".

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

Öffnen Sie die Datei Views\Home\MultiSelectCountry.cshtml, und fügen Sie der Html.ListBoxDatei einen htmlAttributes Parameter hinzu. Der parameter, den Sie hinzufügen, enthält einen Klassennamen für die Auswahlliste(@class = "chzn-select"). Der fertige Code wird unten angezeigt:

<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 hinzu class = "chzn-select". Das @-Zeichen vor der Klasse hat nichts mit dem Razor-Ansichtsmodul zu tun. class ist ein C#-Schlüsselwort. 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 die Klasse aber nicht, weil die Klasse ein Schlüsselwort ist.

Fügen Sie Verweise auf die Dateien "Ausgewählt/chosen.jquery.js " und "Ausgewählt/chosen.css" hinzu . Die ausgewählte/chosen.jquery.js und implementiert die Funktion des ausgewählten Plug-Ins. Die Datei "Ausgewählt/chosen.css " stellt die Formatierung bereit. Fügen Sie diese Verweise am Ende der Datei Views\Home\MultiSelectCountry.cshtml hinzu. Der folgende Code zeigt, wie auf das ausgewählte Plug-In verwiesen wird.

<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();), die das ausgewählte Plug-In bindet.

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 MultiCountryVM Methode und Ansicht, die die MultiSelectCountry-Funktionalität mithilfe eines Ansichtsmodells anstelle eines ViewBag implementiert.

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

Nächste