ASP.NET MVC 4 – Hilfsprogramme, Formulare und Überprüfung

  • Artikel

Von WebCamps Team

Herunterladen des Trainingskits für Webcamps

In ASP.NET MVC 4 Models and Data Access Hands-on Lab haben Sie Daten aus der Datenbank geladen und angezeigt. In diesem praktischen Lab fügen Sie der Music Store-Anwendung die Möglichkeit hinzu, diese Daten zu bearbeiten.

Mit diesem Ziel erstellen Sie zunächst den Controller, der die CRUD-Aktionen (Create, Read, Update and Delete) von Alben unterstützt. Sie generieren eine Indexansichtsvorlage, indem Sie ASP.NET Gerüstfunktion von MVC nutzen, um die Eigenschaften der Alben in einer HTML-Tabelle anzuzeigen. Um diese Ansicht zu verbessern, fügen Sie ein benutzerdefiniertes HTML-Hilfsprogramm hinzu, das lange Beschreibungen abschneidet.

Anschließend fügen Sie die Bearbeitungs- und Erstellungsansichten hinzu, mit denen Sie die Alben in der Datenbank mithilfe von Formularelementen wie Dropdowns ändern können.

Schließlich lassen Sie Benutzer ein Album löschen und verhindern, dass sie falsche Daten eingeben, indem Sie ihre Eingabe überprüfen.

In diesem praktischen Lab wird vorausgesetzt, dass Sie über grundlegende Kenntnisse ASP.NET MVC verfügen. Wenn Sie ASP.NET MVC noch nicht verwendet haben, empfehlen wir Ihnen , ASP.NET MVC Fundamentals Hands-On Lab zu durchlaufen.

Dieses Lab führt Sie durch die zuvor beschriebenen Verbesserungen und neuen Features, indem geringfügige Änderungen an einer Beispielwebanwendung angewendet werden, die im Ordner Quelle bereitgestellt wird.

Hinweis

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, das unter Microsoft-Web/WebCampTrainingKit Releases verfügbar ist. Das für dieses Lab spezifische Projekt ist unter ASP.NET MVC 4 Helpers, Forms and Validation verfügbar.

Ziele

In diesem Hands-On Lab erfahren Sie folgendes:

  • Erstellen eines Controllers zur Unterstützung von CRUD-Vorgängen
  • Generieren einer Indexansicht zum Anzeigen von Entitätseigenschaften in einer HTML-Tabelle
  • Hinzufügen eines benutzerdefinierten HTML-Hilfsprogrammes
  • Erstellen und Anpassen einer Bearbeitungsansicht
  • Unterscheidung zwischen Aktionsmethoden, die entweder auf HTTP-GET- oder HTTP-POST-Aufrufe reagieren
  • Hinzufügen und Anpassen einer Ansicht erstellen
  • Behandeln des Löschens einer Entität
  • Validieren von Benutzereingaben

Voraussetzungen

Sie müssen über die folgenden Elemente verfügen, um dieses Lab abzuschließen:

Einrichten

Installieren von Codeausschnitten

Der Einfachheit halber ist ein Großteil des Codes, den Sie in diesem Lab verwalten, als Visual Studio-Codeausschnitte verfügbar. Führen Sie zum Installieren der Codeausschnitte die Datei .\Source\Setup\CodeSnippets.vsi aus.

Wenn Sie mit den Visual Studio Code-Codeausschnitten nicht vertraut sind und erfahren möchten, wie Sie sie verwenden, können Sie den Anhang dieses Dokuments "Anhang B: Verwenden von Codeausschnitten" lesen.

Übungen

Die folgenden Übungen bilden dieses Hands-On Lab:

  1. Erstellen des Store Manager-Controllers und der zugehörigen Indexansicht
  2. Hinzufügen eines HTML-Hilfsprogrammes
  3. Erstellen der Bearbeitungsansicht
  4. Hinzufügen einer Ansicht erstellen
  5. Behandeln von Löschungen
  6. Hinzufügen der Validierung
  7. Verwenden von Unobtrusive jQuery auf clientseitiger Seite

Hinweis

Jede Übung wird von einem End-Ordner begleitet, der die resultierende Lösung enthält, die Sie nach Abschluss der Übungen erhalten sollten. Sie können diese Lösung als Leitfaden verwenden, wenn Sie zusätzliche Hilfe beim Durchlaufen der Übungen benötigen.

Geschätzte Zeit zum Abschließen dieses Labs: 60 Minuten

Übung 1: Erstellen des Store Manager-Controllers und der zugehörigen Indexansicht

In dieser Übung erfahren Sie, wie Sie einen neuen Controller zur Unterstützung von CRUD-Vorgängen erstellen, die Index-Aktionsmethode anpassen, um eine Liste von Alben aus der Datenbank zurückzugeben, und schließlich eine Indexansichtsvorlage generieren, die ASP.NET Gerüstfunktion von MVC nutzt, um die Eigenschaften der Alben in einer HTML-Tabelle anzuzeigen.

Aufgabe 1: Erstellen des StoreManagerControllers

In dieser Aufgabe erstellen Sie einen neuen Controller namens StoreManagerController zur Unterstützung von CRUD-Vorgängen.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex1-CreatingTheStoreManagerController/Begin/.

    1. Sie müssen einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Fügen Sie einen neuen Controller hinzu. Klicken Sie hierzu im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller, wählen Sie Hinzufügen und dann den Befehl Controller aus. Ändern Sie den Controllernamen in StoreManagerController, und stellen Sie sicher, dass die Option MVC-Controller mit leeren Lese-/Schreibaktionen ausgewählt ist. Klicken Sie auf Hinzufügen.

    Dialogfeld

    Dialogfeld "Controller hinzufügen"

    Eine neue Controllerklasse wird generiert. Da Sie angegeben haben, Aktionen für Lese-/Schreibzugriffs-Stubmethoden für diese hinzuzufügen, werden allgemeine CRUD-Aktionen mit ausgefüllten TODO-Kommentaren erstellt, die aufgefordert werden, die anwendungsspezifische Logik einzuschließen.

Aufgabe 2: Anpassen des StoreManager-Index

In dieser Aufgabe passen Sie die StoreManager Index-Aktionsmethode an, um eine Ansicht mit der Liste der Alben aus der Datenbank zurückzugeben.

  1. Fügen Sie in der StoreManagerController-Klasse die folgenden using-Anweisungen hinzu.

    (Codeausschnitt – ASP.NET MVC 4 Helpers and Forms and Validation – Ex1 using MvcMusicStore)

    using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;

  2. Fügen Sie dem StoreManagerController ein Feld hinzu, um eine instance musicStoreEntities zu speichern.

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex1 MusicStoreEntities)

    public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();

  3. Implementieren Sie die StoreManagerController Index-Aktion, um eine Ansicht mit der Liste der Alben zurückzugeben.

    Die Controlleraktionslogik ähnelt der zuvor geschriebenen Indexaktion des StoreControllers. Verwenden Sie LINQ, um alle Alben abzurufen, einschließlich Genre- und Künstlerinformationen zur Anzeige.

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex1 StoreManagerController-Index)

    //
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}

Aufgabe 3: Erstellen der Indexansicht

In dieser Aufgabe erstellen Sie die Vorlage Indexansicht, um die Liste der vom StoreManager-Controller zurückgegebenen Alben anzuzeigen.

  1. Bevor Sie die neue Ansichtsvorlage erstellen, sollten Sie das Projekt so erstellen, dass das Dialogfeld Ansicht hinzufügen die zu verwendende Album-Klasse kennt. Wählen Sie Erstellen | Erstellen Sie MvcMusicStore , um das Projekt zu erstellen.

  2. Klicken Sie mit der rechten Maustaste in die Indexaktionsmethode, und wählen Sie Ansicht hinzufügen aus. Dadurch wird das Dialogfeld Ansicht hinzufügen geöffnet.

    Ansicht hinzufügen

    Hinzufügen eines View-Werts aus der Index-Methode

  3. Überprüfen Sie im Dialogfeld Ansicht hinzufügen, ob der Ansichtsname Index ist. Wählen Sie die Option Stark typisierte Ansicht erstellen und dann in der Dropdownliste Modellklasse die Option Album (MvcMusicStore.Models) aus. Wählen Sie in der Dropdownliste Gerüstvorlage die Option Liste aus. Überlassen Sie die Ansichts-EngineRazor und den anderen Feldern mit ihrem Standardwert, und klicken Sie dann auf Hinzufügen.

    Hinzufügen einer Indexansicht

    Hinzufügen einer Indexansicht

Aufgabe 4: Anpassen des Gerüsts der Indexansicht

In dieser Aufgabe passen Sie die einfache Ansichtsvorlage an, die mit ASP.NET MVC-Gerüstbaufunktion erstellt wurde, damit die gewünschten Felder angezeigt werden.

Hinweis

Die Unterstützung des Gerüstbaus in ASP.NET MVC generiert eine einfache Ansichtsvorlage, die alle Felder im Albummodell auflistet. Das Gerüstbau bietet einen schnellen Einstieg in eine stark typisierte Ansicht: Anstatt die Ansichtsvorlage manuell schreiben zu müssen, generiert das Gerüstbau schnell eine Standardvorlage, und Sie können dann den generierten Code ändern.

  1. Überprüfen Sie den erstellten Code. Die generierte Liste der Felder ist Teil der folgenden HTML-Tabelle, die das Gerüstbau zum Anzeigen tabellarischer Daten verwendet.

    @model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </td>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
     </tr>
}

</table>

  2. Ersetzen Sie den <Tabellencode> durch den folgenden Code, um nur die Felder Genre, Künstler, Albumtitel und Preis anzuzeigen. Dadurch werden die Spalten AlbumId und AlbumArt-URL gelöscht. Außerdem werden die Spalten GenreId und ArtistId so geändert, dass die verknüpften Klasseneigenschaften von Artist.Name und Genre.Name angezeigt werden, und der Link Details wird entfernt.

    <table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

  3. Ändern Sie die folgenden Beschreibungen.

    @model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Aufgabe 5: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass die StoreManager-Indexansichtsvorlage eine Liste von Alben gemäß dem Entwurf der vorherigen Schritte anzeigt.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager , um zu überprüfen, ob eine Liste von Alben angezeigt wird, in der titel, künstler und genre angezeigt werden.

    Durchsuchen der Liste der Alben

    Durchsuchen der Liste der Alben

Übung 2: Hinzufügen eines HTML-Hilfsprogramm

Die Seite StoreManager-Index hat ein potenzielles Problem: Die Eigenschaften Title und Artist Name können beide lang genug sein, um die Tabellenformatierung auszulösen. In dieser Übung erfahren Sie, wie Sie ein benutzerdefiniertes HTML-Hilfsprogramm hinzufügen, um diesen Text abzuschneiden.

In der folgenden Abbildung sehen Sie, wie das Format aufgrund der Länge des Texts geändert wird, wenn Sie eine kleine Browsergröße verwenden.

Durchsuchen der Liste der Alben mit nicht abgeschnittenem Text

Durchsuchen der Liste der Alben mit nicht abgeschnittenem Text

Aufgabe 1: Erweitern des HTML-Hilfsprogrammes

In dieser Aufgabe fügen Sie dem HTML-Objekt, das in ASP.NET MVC-Ansichten verfügbar gemacht wird, eine neue Methode truncate hinzu. Zu diesem Ziel implementieren Sie eine Erweiterungsmethode für die integrierte System.Web.Mvc.HtmlHelper-Klasse , die von ASP.NET MVC bereitgestellt wird.

Hinweis

Weitere Informationen zu Erweiterungsmethoden finden Sie in diesem MSDN-Artikel. https://msdn.microsoft.com/library/bb383977.aspx.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex2-AddingAnHTMLHelper/Begin/. Andernfalls können Sie die Lösung End weiter verwenden, die Sie durch Abschließen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Projektmappe geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Öffnen Sie die Indexansicht von StoreManager. Erweitern Sie dazu im Projektmappen-Explorer den Ordner Views, dann storeManager, und öffnen Sie die Datei Index.cshtml.

  3. Fügen Sie den folgenden Code unter der @model-Direktive hinzu, um die Truncate-Hilfsmethode zu definieren.

    @model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Aufgabe 2: Abschneiden von Text auf der Seite

In dieser Aufgabe verwenden Sie die Truncate-Methode , um den Text in der Ansichtsvorlage abzuschneiden.

  1. Öffnen Sie die Indexansicht von StoreManager. Erweitern Sie dazu im Projektmappen-Explorer den Ordner Views, dann storeManager, und öffnen Sie die Datei Index.cshtml.

  2. Ersetzen Sie die Zeilen, die den Künstlernamen und den Titel des Albums anzeigen. Ersetzen Sie dazu die folgenden Zeilen.

    <tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Genre.Name)
     </td>
     <td>
          @Truncate(item.Artist.Name, 25)
     </td>
     <td>
          @Truncate(item.Title, 25)
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Price)
     </td>
</tr>

Aufgabe 3: Ausführen der Anwendung

In dieser Aufgabe testen Sie, ob die StoreManager-Indexansichtsvorlage den Titel und den Künstlernamen des Albums abschneidet.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager , um zu überprüfen, ob lange Texte in den Spalten Titel und Künstler abgeschnitten sind.

    Gekürzte Titel und Künstlernamen

    Gekürzte Titel und Künstlernamen

Übung 3: Erstellen der Bearbeitungsansicht

In dieser Übung erfahren Sie, wie Sie ein Formular erstellen, mit dem Store-Manager ein Album bearbeiten können. Sie durchsuchen die URL /StoreManager/Edit/id (id ist die eindeutige ID des zu bearbeitenden Albums), sodass ein HTTP-GET-Aufruf an den Server erfolgt.

Die Controller-Aktionsmethode Bearbeiten ruft das entsprechende Album aus der Datenbank ab, erstellt ein StoreManagerViewModel-Objekt , um es zu kapseln (zusammen mit einer Liste der Künstler und Genres), und übergibt es dann an eine Ansichtsvorlage, um die HTML-Seite wieder an den Benutzer zu rendern. Diese Seite enthält ein <Formularelement> mit Textfeldern und Dropdownlisten zum Bearbeiten der Albumeigenschaften.

Sobald der Benutzer die Album-Formularwerte aktualisiert und auf die Schaltfläche Speichern klickt, werden die Änderungen über einen HTTP-POST-Aufruf zurück an /StoreManager/Edit/id übermittelt. Die URL bleibt zwar identisch mit der beim letzten Aufruf, ASP.NET MVC erkennt jedoch, dass es sich diesmal um eine HTTP-POST handelt, und führt daher eine andere Edit-Aktionsmethode (eine mit [HttpPost]) ergänzte Aktionsmethode aus.

Aufgabe 1: Implementieren der HTTP-GET Edit Action-Methode

In dieser Aufgabe implementieren Sie die HTTP-GET-Version der Aktionsmethode Bearbeiten, um das entsprechende Album aus der Datenbank sowie eine Liste aller Genres und Künstler abzurufen. Diese Daten werden in das im letzten Schritt definierte StoreManagerViewModel-Objekt verpackt, das dann an eine Ansichtsvorlage übergeben wird, mit der die Antwort gerendert wird.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex3-CreatingTheEditView/Begin/. Andernfalls können Sie die Lösung End weiter verwenden, die Sie durch Abschließen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Projektmappe geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Öffnen Sie die StoreManagerController-Klasse . Erweitern Sie hierzu den Ordner Controllers , und doppelklicken Sie auf StoreManagerController.cs.

  3. Ersetzen Sie die Aktionsmethode HTTP-GET Edit durch den folgenden Code, um das entsprechende Album sowie die Listen Genres und Künstler abzurufen.

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex3 StoreManagerController HTTP-GET Edit-Aktion)

    public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}

    Hinweis

    Sie verwenden System.Web.MvcSelectList für Künstler und Genres anstelle der System.Collections.Generic-Liste .

    SelectList ist eine übersichtlichere Möglichkeit, HTML-Dropdowns aufzufüllen und Dinge wie die aktuelle Auswahl zu verwalten. Durch das Instanziieren und späteren Einrichten dieser ViewModel-Objekte in der Controlleraktion wird das Formular bearbeiten-Szenario übersichtlicher.

Aufgabe 2: Erstellen der Bearbeitungsansicht

In dieser Aufgabe erstellen Sie eine Vorlage "Ansicht bearbeiten", in der später die Albumeigenschaften angezeigt werden.

  1. Erstellen Sie die Bearbeitungsansicht. Klicken Sie hierzu mit der rechten Maustaste in die Aktionsmethode Bearbeiten , und wählen Sie Ansicht hinzufügen aus.

  2. Überprüfen Sie im Dialogfeld Ansicht hinzufügen, ob der Ansichtsname Bearbeiten lautet. Aktivieren Sie das Kontrollkästchen Stark typisierte Ansicht erstellen, und wählen Sie in der Dropdownliste Datenklasse anzeigen die Option Album (MvcMusicStore.Models) aus. Wählen Sie in der Dropdownliste Gerüstvorlage die Option Bearbeiten aus. Behalten Sie für die anderen Felder den Standardwert bei, und klicken Sie dann auf Hinzufügen.

    Hinzufügen einer Bearbeitungsansicht

    Hinzufügen einer Bearbeitungsansicht

Aufgabe 3: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass auf der Seite Ansicht bearbeiten von StoreManager die Eigenschaftenwerte für das als Parameter übergebene Album angezeigt werden.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager/Edit/1 , um zu überprüfen, ob die Eigenschaftenwerte für das übergebene Album angezeigt werden.

    Durchsuchen der Bearbeitungsansicht des Albums

    Durchsuchen der Bearbeitungsansicht des Albums

Aufgabe 4: Implementieren von Dropdowns für die Album-Editor-Vorlage

In dieser Aufgabe fügen Sie der In der letzten Aufgabe erstellten Ansichtsvorlage Dropdowns hinzu, sodass der Benutzer aus einer Liste von Künstlern und Genres auswählen kann.

  1. Ersetzen Sie den gesamten Album-Feldsatzcode durch Folgendes:

    <fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

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

    Hinweis

    Ein Html.DropDownList-Hilfsprogramm wurde hinzugefügt, um Render-Dropdowns für die Auswahl von Künstlern und Genres zu rendern. Die an Html.DropDownList übergebenen Parameter lauten:

    1. Der Name des Formularfelds ("ArtistId").
    2. Die SelectList der Werte für die Dropdownliste.

Aufgabe 5: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass auf der Seite Ansicht bearbeiten im StoreManager Dropdownlisten anstelle von Textfeldern der Künstler- und Genre-ID angezeigt werden.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager/Edit/1 , um zu überprüfen, ob anstelle der Textfelder "Künstler" und "Genre-ID" Dropdownfelder angezeigt werden.

    Durchsuchen der Bearbeitungsansicht des Albums mit Dropdownmenüs

    Durchsuchen der Bearbeitungsansicht des Albums, dieses Mal mit Dropdownlisten

Aufgabe 6: Implementieren der AKTION "HTTP-POST Bearbeiten"

Nachdem die Bearbeitungsansicht wie erwartet angezeigt wird, müssen Sie die HTTP-POST Edit Action-Methode implementieren, um die am Album vorgenommenen Änderungen zu speichern.

  1. Schließen Sie bei Bedarf den Browser, um zum Visual Studio-Fenster zurückzukehren. Öffnen Sie StoreManagerController im Ordner Controllers .

  2. Ersetzen Sie http-POST Edit action method code durch folgendes (beachten Sie, dass die Zu ersetzende Methode eine überladene Version ist, die zwei Parameter empfängt):

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex3 StoreManagerController HTTP-POST-Aktion Bearbeiten)

    [HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

    Hinweis

    Diese Methode wird ausgeführt, wenn der Benutzer auf die Schaltfläche Speichern der Ansicht klickt und eine HTTP-POST der Formularwerte zurück an den Server ausführt, um sie in der Datenbank zu speichern. Der Decorator [HttpPost] gibt an, dass die -Methode für diese HTTP-POST-Szenarien verwendet werden soll. Die -Methode nimmt ein Album-Objekt an. ASP.NET MVC erstellt automatisch das Album-Objekt aus den bereitgestellten <Formularwerten> .

    Die -Methode führt die folgenden Schritte aus:

    1. Wenn das Modell gültig ist:

      1. Aktualisieren Sie den Albumeintrag im Kontext, um ihn als geändertes Objekt zu markieren.
      2. Speichern Sie die Änderungen, und leiten Sie sie in die Indexansicht um.

    2. Wenn das Modell nicht gültig ist, füllt es den ViewBag mit der GenreId und der ArtistId auf. Anschließend wird die Ansicht mit dem empfangenen Album-Objekt zurückgegeben, damit der Benutzer alle erforderlichen Aktualisierungen durchführen kann.

Aufgabe 7: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass die Seite "StoreManager-Ansicht bearbeiten " die aktualisierten Albumdaten tatsächlich in der Datenbank speichert.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager/Edit/1. Ändern Sie den Albumtitel in Laden , und klicken Sie auf Speichern. Überprüfen Sie, ob sich der Titel des Albums tatsächlich in der Liste der Alben geändert hat.

    Aktualisieren eines Albums

    Aktualisieren eines Albums

Übung 4: Hinzufügen einer Ansicht erstellen

Nachdem der StoreManagerController die Funktion Bearbeiten unterstützt, erfahren Sie in dieser Übung, wie Sie eine Create View-Vorlage hinzufügen, damit Store-Manager der Anwendung neue Alben hinzufügen können.

Wie bei der Edit-Funktion implementieren Sie das Create-Szenario mithilfe von zwei separaten Methoden innerhalb der StoreManagerController-Klasse :

  1. Eine Aktionsmethode zeigt ein leeres Formular an, wenn Filialleiter zum ersten Mal die Url "/StoreManager/Create " aufrufen.
  2. Eine zweite Aktionsmethode behandelt das Szenario, in dem der Store-Manager im Formular auf die Schaltfläche Speichern klickt und die Werte als HTTP-POST an den /StoreManager/Create URL zurückgibt.

Aufgabe 1: Implementieren der AKTION "HTTP-GET Create"

In dieser Aufgabe implementieren Sie die HTTP-GET-Version der Create-Aktionsmethode, um eine Liste aller Genres und Künstler abzurufen, und packen diese Daten in ein StoreManagerViewModel-Objekt , das dann an eine View-Vorlage übergeben wird.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex4-AddingACreateView/Begin/. Andernfalls können Sie die Lösung End weiter verwenden, die Sie durch Abschließen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Projektmappe geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Öffnen Sie die StoreManagerController-Klasse . Erweitern Sie hierzu den Ordner Controllers , und doppelklicken Sie auf StoreManagerController.cs.

  3. Ersetzen Sie den Code der Create-Aktionsmethode durch Folgendes:

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex4 StoreManagerController HTTP-GET Create-Aktion)

    //
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

Aufgabe 2: Hinzufügen der Ansicht "Erstellen"

In dieser Aufgabe fügen Sie die Vorlage Ansicht erstellen hinzu, die ein neues (leeres) Albumformular anzeigt.

  1. Klicken Sie mit der rechten Maustaste in die Aktionsmethode Erstellen, und wählen Sie Ansicht hinzufügen aus. Dadurch wird das Dialogfeld Ansicht hinzufügen geöffnet.

  2. Überprüfen Sie im Dialogfeld Ansicht hinzufügen, ob der Ansichtsname Erstellen lautet. Wählen Sie die Option Stark typisierte Ansicht erstellen und dann in der Dropdownliste Modellklassedie Option Album (MvcMusicStore.Models) und in der Dropdownliste Gerüstvorlageerstellen aus. Behalten Sie für die anderen Felder den Standardwert bei, und klicken Sie dann auf Hinzufügen.

    Hinzufügen einer ansicht erstellen

    Hinzufügen der Ansicht für das Erstellen

  3. Aktualisieren Sie die Felder GenreId und ArtistId , um eine Dropdownliste wie unten gezeigt zu verwenden:

    ...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

Aufgabe 3: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass auf der Seite Ansicht erstellen von StoreManager ein leeres Albumformular angezeigt wird.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager/Create. Stellen Sie sicher, dass ein leeres Formular zum Ausfüllen der neuen Albumeigenschaften angezeigt wird.

    Erstellen einer Ansicht mit einem leeren Formular

    Erstellen einer Ansicht mit einem leeren Formular

Aufgabe 4: Implementieren der HTTP-POST Create Action-Methode

In dieser Aufgabe implementieren Sie die HTTP-POST-Version der Create-Aktionsmethode, die aufgerufen wird, wenn ein Benutzer auf die Schaltfläche Speichern klickt. Die -Methode sollte das neue Album in der Datenbank speichern.

  1. Schließen Sie bei Bedarf den Browser, um zum Visual Studio-Fenster zurückzukehren. Öffnen Sie die StoreManagerController-Klasse . Erweitern Sie hierzu den Ordner Controllers , und doppelklicken Sie auf StoreManagerController.cs.

  2. Ersetzen Sie http-POST Create action method code (HTTP-POST Create action method code) durch Folgendes:

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex4 StoreManagerController HTTP– POST Create-Aktion)

    [HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

    Hinweis

    Die Aktion Erstellen ähnelt der vorherigen Edit-Aktionsmethode, aber anstatt das Objekt als geändert festzulegen, wird es dem Kontext hinzugefügt.

Aufgabe 5: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass Sie auf der Seite StoreManager-Ansicht erstellen ein neues Album erstellen und dann zur StoreManager-Indexansicht umleiten können.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager/Create. Füllen Sie alle Formularfelder mit Daten für ein neues Album aus, wie in der folgenden Abbildung:

    Erstellen eines Albums

    Erstellen eines Albums

  3. Stellen Sie sicher, dass Sie zur StoreManager-Indexansicht umgeleitet werden, die das soeben erstellte neue Album enthält.

    Neues Album erstellt

    Neues Album erstellt

Übung 5: Behandeln des Löschens

Die Möglichkeit zum Löschen von Alben ist noch nicht implementiert. Darum geht es in dieser Übung. Wie zuvor implementieren Sie das Delete-Szenario mit zwei separaten Methoden innerhalb der StoreManagerController-Klasse :

  1. Eine Aktionsmethode zeigt ein Bestätigungsformular an.
  2. Eine zweite Aktionsmethode behandelt die Formularübermittlung.

Aufgabe 1: Implementieren der HTTP-GET Delete Action-Methode

In dieser Aufgabe implementieren Sie die HTTP-GET-Version der Delete-Aktionsmethode, um die Informationen zum Album abzurufen.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex5-HandlingDeletion/Begin/. Andernfalls können Sie die Lösung End weiter verwenden, die Sie durch Abschließen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Projektmappe geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Öffnen Sie die StoreManagerController-Klasse . Erweitern Sie hierzu den Ordner Controllers , und doppelklicken Sie auf StoreManagerController.cs.

  3. Die Aktion Controller löschen entspricht genau der vorherigen Controlleraktion "Details speichern": Sie fragt das Albumobjekt aus der Datenbank ab, indem sie die in der URL angegebene ID verwendet und die entsprechende Ansicht zurückgibt. Ersetzen Sie hierzu den Code der AKTION HTTP-GET Delete durch Folgendes:

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex5 Behandeln von Löschen HTTP-GET Delete-Aktion)

    //
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}

  4. Klicken Sie mit der rechten Maustaste in die Aktionsmethode Löschen, und wählen Sie Ansicht hinzufügen aus. Dadurch wird das Dialogfeld Ansicht hinzufügen geöffnet.

  5. Überprüfen Sie im Dialogfeld Ansicht hinzufügen, ob der Ansichtsname Löschen lautet. Wählen Sie die Option Stark typisierte Ansicht erstellen und dann in der Dropdownliste Modellklasse die Option Album (MvcMusicStore.Models) aus. Wählen Sie in der Dropdownliste Gerüstvorlagedie Option Löschen aus. Behalten Sie für die anderen Felder den Standardwert bei, und klicken Sie dann auf Hinzufügen.

    Hinzufügen einer Löschansicht

    Hinzufügen einer Löschansicht

  6. Die Vorlage Löschen zeigt alle Felder aus dem Modell an. Sie zeigen nur den Titel des Albums an. Ersetzen Sie dazu den Inhalt der Ansicht durch den folgenden Code:

    @model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

Aufgabe 2: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass auf der Seite StoreManagerLöschansicht ein Bestätigungsformular für den Löschvorgang angezeigt wird.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager. Wählen Sie ein Zu löschendes Album aus, indem Sie auf Löschen klicken, und überprüfen Sie, ob die neue Ansicht hochgeladen wurde.

    Screenshot: Ausgewählte Option

    Löschen eines Albums

Aufgabe 3: Implementieren der HTTP-POST Delete Action-Methode

In dieser Aufgabe implementieren Sie die HTTP-POST-Version der Delete-Aktionsmethode, die aufgerufen wird, wenn ein Benutzer auf die Schaltfläche Löschen klickt. Die -Methode sollte das Album in der Datenbank löschen.

  1. Schließen Sie bei Bedarf den Browser, um zum Visual Studio-Fenster zurückzukehren. Öffnen Sie die StoreManagerController-Klasse . Erweitern Sie hierzu den Ordner Controllers , und doppelklicken Sie auf StoreManagerController.cs.

  2. Ersetzen Sie http-POST Delete action method code (HTTP-POST Delete action method code) durch Folgendes:

    (Codeausschnitt – ASP.NET MVC 4-Hilfsprogramme und Formulare und Validierung – Ex5 Behandeln der Aktion Löschen HTTP-POST Löschen)

    //
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

Aufgabe 4: Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass Sie auf der Seite StoreManager-Löschansicht ein Album löschen und dann zur StoreManager-Indexansicht umleiten können.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager. Wählen Sie ein Zu löschendes Album aus, indem Sie auf Löschen klicken. Bestätigen Sie den Löschvorgang, indem Sie auf die Schaltfläche Löschen klicken:

    Screenshot: Fenster

    Löschen eines Albums

  3. Vergewissern Sie sich, dass das Album gelöscht wurde, da es nicht auf der Seite Index angezeigt wird.

Übung 6: Hinzufügen der Validierung

Derzeit führen die Erstellten und Bearbeiten-Formulare, die Sie haben, keine Überprüfung durch. Wenn der Benutzer ein erforderliches Feld leer lässt oder Buchstaben im Preisfeld eingibt, wird der erste Fehler aus der Datenbank angezeigt.

Sie können der Anwendung eine Validierung hinzufügen, indem Sie Ihrer Modellklasse Datenanmerkungen hinzufügen. Datenanmerkungen ermöglichen das Beschreiben der Regeln, die Sie auf Ihre Modelleigenschaften anwenden möchten, und ASP.NET MVC übernimmt die Erzwingung und Anzeige entsprechender Nachrichten für Benutzer.

Aufgabe 1: Hinzufügen von Datenanmerkungen

In dieser Aufgabe fügen Sie dem Albummodell Datenanmerkungen hinzu, sodass auf der Seite Erstellen und Bearbeiten ggf. Validierungsmeldungen angezeigt werden.

Bei einer einfachen Model-Klasse wird das Hinzufügen einer Datenanmerkung einfach durch Hinzufügen einer using-Anweisung für System.ComponentModel.DataAnnotation und anschließendes Platzieren eines [Erforderlich]- Attributs für die entsprechenden Eigenschaften behandelt. Im folgenden Beispiel wird die Name-Eigenschaft in der Ansicht zu einem Pflichtfeld.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Dies ist etwas komplexer in Fällen wie dieser Anwendung, in denen das Entitätsdatenmodell generiert wird. Wenn Sie den Modellklassen Datenanmerkungen direkt hinzugefügt haben, werden diese überschrieben, wenn Sie das Modell aus der Datenbank aktualisieren. Stattdessen können Sie partielle Metadatenklassen verwenden, die vorhanden sind, um die Anmerkungen zu enthalten und den Modellklassen mithilfe des [MetadataType]- Attributs zugeordnet sind.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex6-AddingValidation/Begin/. Andernfalls können Sie die Lösung End weiter verwenden, die Sie durch Abschließen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Projektmappe geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Öffnen Sie album.cs im Ordner Models .

  3. Ersetzen Sie album.cs-Inhalt durch den hervorgehobenen Code, sodass er wie folgt aussieht:

    Hinweis

    Die Zeile [DisplayFormat(ConvertEmptyStringToNull=false)] gibt an, dass leere Zeichenfolgen aus dem Modell nicht in NULL konvertiert werden, wenn das Datenfeld in der Datenquelle aktualisiert wird. Durch diese Einstellung wird eine Ausnahme vermieden, wenn Entity Framework dem Modell NULL-Werte zuweist, bevor die Datenanmerkung die Felder überprüft.

    (Codeausschnitt – ASP.NET MVC 4 Helpers and Forms and Validation – Ex6 Album metadata partial class)

    namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}

    Hinweis

    Diese Partielle Album-Klasse verfügt über ein MetadataType-Attribut , das auf die AlbumMetaData-Klasse für die Datenanmerkungen verweist. Dies sind einige der Datenanmerkungsattribute, die Sie zum Kommentieren des Albummodells verwenden:

    • Erforderlich: Gibt an, dass die Eigenschaft ein erforderliches Feld ist.
    • DisplayName: Definiert den Text, der für Formularfelder und Validierungsmeldungen verwendet werden soll.
    • DisplayFormat: Gibt an, wie Datenfelder angezeigt und formatiert werden.
    • StringLength: Definiert eine maximale Länge für ein Zeichenfolgenfeld.
    • Bereich: Gibt einen maximalen und minimalen Wert für ein numerisches Feld an.
    • ScaffoldColumn: Ermöglicht das Ausblenden von Feldern in Editorformularen

Aufgabe 2: Ausführen der Anwendung

In dieser Aufgabe testen Sie, ob die Felder "Seiten erstellen" und "Bearbeiten" überprüfen, indem Sie die anzeigenamen verwenden, die im letzten Vorgang ausgewählt wurden.

  1. Drücken Sie F5 , um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Ändern Sie die URL in /StoreManager/Create. Stellen Sie sicher, dass die Anzeigenamen mit denen in der partiellen Klasse übereinstimmen (z. B. AlbumArt-URL anstelle von AlbumArtUrl).

  3. Klicken Sie auf Erstellen, ohne das Formular auszufüllen. Stellen Sie sicher, dass Sie die entsprechenden Validierungsmeldungen erhalten.

    Überprüfte Felder auf der Seite

    Überprüfte Felder auf der Seite Erstellen

  4. Sie können überprüfen, ob dies auch auf der Seite Bearbeiten der Fall ist. Ändern Sie die URL in /StoreManager/Edit/1 , und vergewissern Sie sich, dass die Anzeigenamen mit denen in der partiellen Klasse übereinstimmen (z. B . Albumart-URL anstelle von AlbumArtUrl). Leeren Sie die Felder Titel und Preis , und klicken Sie auf Speichern. Vergewissern Sie sich, dass Sie die entsprechenden Validierungsmeldungen erhalten.

    Überprüfte Felder auf der Seite

    Überprüfte Felder auf der Seite "Bearbeiten"

Übung 7: Verwenden von unauffälliger jQuery auf der Clientseite

In dieser Übung erfahren Sie, wie Sie die MVC 4 Unauffällige jQuery-Validierung auf der Clientseite aktivieren.

Hinweis

Die unauffällige jQuery verwendet das Daten-Ajax-Präfix JavaScript, um Aktionsmethoden auf dem Server aufzurufen, anstatt Inlineclientskripts intrusiv auszustrahlen.

Aufgabe 1: Ausführen der Anwendung vor dem Aktivieren von unauffälliger jQuery

In dieser Aufgabe führen Sie die Anwendung aus, bevor Sie jQuery einschließen, um beide Validierungsmodelle zu vergleichen.

  1. Öffnen Sie die Projektmappe Begin im Ordner Source/Ex7-UnobtrusivejQueryValidation/Begin/ . Andernfalls können Sie die Lösung End weiter verwenden, die Sie durch Abschließen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Startlösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.

    2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.

    3. Erstellen Sie abschließend die Projektmappe, indem Sie aufBuild Solution (Projektmappe erstellen) | klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet ist, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Wenn Sie mit NuGet Power Tools die Paketversionen in der Packages.config-Datei angeben, können Sie alle erforderlichen Bibliotheken herunterladen, wenn Sie das Projekt zum ersten Mal ausführen. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Drücken Sie F5, um die Anwendung auszuführen.

  3. Das Projekt beginnt auf der Startseite. Navigieren Sie /StoreManager/Create , und klicken Sie auf Erstellen , ohne das Formular auszufüllen, um zu überprüfen, ob Sie Validierungsmeldungen erhalten:

    Clientüberprüfung deaktiviert

    Clientüberprüfung deaktiviert

  4. Öffnen Sie im Browser den HTML-Quellcode:

    ...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

Aufgabe 2: Aktivieren der unauffälligen Clientüberprüfung

In dieser Aufgabe aktivieren Sie die unauffällige jQuery-Clientüberprüfung aus Web.config Datei, die in allen neuen ASP.NET MVC 4-Projekten standardmäßig auf false festgelegt ist. Darüber hinaus fügen Sie die erforderlichen Skriptverweise hinzu, damit die unauffällige Clientüberprüfung von jQuery funktioniert.

  1. Öffnen Sie Web.Config Datei am Projektstamm, und stellen Sie sicher, dass die Schlüsselwerte ClientValidationEnabled und UnobtrusiveJavaScriptEnabled auf true festgelegt sind.

    ...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...

    Hinweis

    Sie können auch die Clientvalidierung per Code unter Global.asax.cs aktivieren, um die gleichen Ergebnisse zu erhalten:

    HtmlHelper.ClientValidationEnabled = true;

    Darüber hinaus können Sie jedem Controller ein ClientValidationEnabled-Attribut zuweisen, um ein benutzerdefiniertes Verhalten zu haben.

  2. Öffnen Sie Create.cshtml unter Views\StoreManager.

  3. Stellen Sie sicher, dass auf die folgenden Skriptdateien jquery.validate und jquery.validate.unobtrusive in der Ansicht über das Paket "~/bundles/jqueryval" verwiesen wird.

    ...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}

    Hinweis

    Alle diese jQuery-Bibliotheken sind in neuen MVC 4-Projekten enthalten. Weitere Bibliotheken finden Sie im Ordner /Scripts Ihres Projekts.

    Damit diese Validierungsbibliotheken funktionieren, müssen Sie einen Verweis auf die jQuery-Frameworkbibliothek hinzufügen. Da dieser Verweis bereits in der Datei _Layout.cshtml hinzugefügt wurde, müssen Sie ihn nicht in dieser speziellen Ansicht hinzufügen.

Aufgabe 3: Ausführen der Anwendung mithilfe der unauffälligen jQuery-Validierung

In dieser Aufgabe testen Sie, dass die StoreManager-Erstellungsansichtsvorlage die clientseitige Überprüfung mithilfe von jQuery-Bibliotheken durchführt, wenn der Benutzer ein neues Album erstellt.

  1. Drücken Sie F5, um die Anwendung auszuführen.

  2. Das Projekt beginnt auf der Startseite. Navigieren Sie /StoreManager/Create , und klicken Sie auf Erstellen , ohne das Formular auszufüllen, um zu überprüfen, ob Sie Validierungsmeldungen erhalten:

    Clientvalidierung mit jQuery-Aktivierter

    Clientvalidierung mit aktivierter jQuery

  3. Öffnen Sie im Browser den Quellcode für die Ansicht Erstellen:

    ...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

    Hinweis

    Für jede Clientvalidierungsregel fügt Unauffällig jQuery ein Attribut mit data-val-rulename="message" hinzu. Im Folgenden finden Sie eine Liste von Tags, die unauffällig jQuery in das HTML-Eingabefeld eingefügt werden, um die Clientüberprüfung durchzuführen:

    • Datenwert
    • Data-val-number
    • Data-val-range
    • Data-val-range-min / Data-val-range-max
    • Data-val-required
    • Datenwertlänge
    • Data-val-length-max / Data-val-length-min

    Alle Datenwerte werden mit Modelldatenanmerkung gefüllt. Anschließend kann die gesamte Logik, die auf serverseitiger Seite funktioniert, auf der Clientseite ausgeführt werden. Beispielsweise weist das Price-Attribut die folgende Datenanmerkung im Modell auf:

    [Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

    Nach der Verwendung von Unauffälliger jQuery lautet der generierte Code:

    <input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

Zusammenfassung

Durch Abschluss dieses Hands-On Lab haben Sie gelernt, wie Sie Benutzern das Ändern der in der Datenbank gespeicherten Daten mithilfe von folgendes ermöglichen:

  • Controlleraktionen wie Index, Create, Edit, Delete
  • ASP.NET Gerüstfunktion von MVC zum Anzeigen von Eigenschaften in einer HTML-Tabelle
  • Benutzerdefinierte HTML-Hilfsprogramme zur Verbesserung der Benutzererfahrung
  • Aktionsmethoden, die entweder auf HTTP-GET- oder HTTP-POST-Aufrufe reagieren
  • Eine freigegebene Editorvorlage für ähnliche Ansichtsvorlagen wie Erstellen und Bearbeiten
  • Formularelemente wie Dropdownlisten
  • Datenanmerkungen für die Modellüberprüfung
  • Clientseitige Validierung mithilfe der unauffälligen jQuery-Bibliothek

Anhang A: Installieren Visual Studio Express 2012 für Web

Sie können Microsoft Visual Studio Express 2012 für Web oder eine andere Express-Version mithilfe des Microsoft-Webplattform-Installer installieren. Die folgenden Anweisungen führen Sie durch die Schritte, die zum Installieren von Visual Studio Express 2012 für Web mithilfe von Microsoft-Webplattform-Installer erforderlich sind.

  1. Wechseln Sie zu [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternativ können Sie den Webplattform-Installer öffnen und nach dem Produkt "Visual Studio Express 2012 für Web mit dem Windows Azure SDK" suchen.

  2. Klicken Sie auf Jetzt installieren. Wenn Sie nicht über den Webplattform-Installer verfügen, werden Sie umgeleitet, ihn zuerst herunterzuladen und zu installieren.

  3. Sobald der Webplattform-Installer geöffnet ist, klicken Sie auf Installieren , um das Setup zu starten.

    Installieren von Visual Studio Express

    Installieren von Visual Studio Express

  4. Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf Ich stimme zu, um fortzufahren.

    Akzeptieren der Lizenzbedingungen

    Akzeptieren der Lizenzbedingungen

  5. Warten Sie, bis der Download- und Installationsvorgang abgeschlossen ist.

    Installationsstatus

    Installationsstatus

  6. Klicken Sie nach Abschluss der Installation auf Fertig stellen.

    Installation abgeschlossen

    Installation abgeschlossen

  7. Klicken Sie auf Beenden , um den Webplattform-Installer zu schließen.

  8. Um Visual Studio Express für Web zu öffnen, wechseln Sie zum Startbildschirm, und beginnen Sie mit dem Schreiben von "VS Express", und klicken Sie dann auf die Kachel VS Express für Web.

    VS Express für Webkachel

    VS Express für Webkachel

Anhang B: Verwenden von Codeausschnitten

Mit Codeausschnitten haben Sie den gesamten Code, den Sie benötigen, zur Hand. Das Lab-Dokument informiert Sie genau, wann Sie sie verwenden können, wie in der folgenden Abbildung gezeigt.

Verwenden von Visual Studio-Codeausschnitten zum Einfügen von Code in Ihr Projekt

Verwenden von Visual Studio-Codeausschnitten zum Einfügen von Code in Ihr Projekt

So fügen Sie einen Codeausschnitt mithilfe der Tastatur hinzu (nur C#)

  1. Platzieren Sie den Cursor an der Stelle, an der Sie den Code einfügen möchten.
  2. Beginnen Sie mit der Eingabe des Codeausschnittnamens (ohne Leerzeichen oder Bindestriche).
  3. Sehen Sie sich an, wie IntelliSense übereinstimmende Codeausschnittnamen anzeigt.
  4. Wählen Sie den richtigen Codeausschnitt aus (oder geben Sie weiter, bis der Name des gesamten Ausschnitts ausgewählt ist).
  5. Drücken Sie zweimal die TAB-TASTE, um den Codeausschnitt an der Cursorposition einzufügen.

Beginnen Sie mit der Eingabe des Codeausschnittnamens beginnen

Beginnen Sie mit der Eingabe des Codeausschnittnamens.

Drücken Sie die TAB-TASTE, um den hervorgehobenen Codeausschnitt auszuwählen.

Drücken Sie die TAB-TASTE, um den hervorgehobenen Codeausschnitt auszuwählen.

Drücken Sie die TAB-TASTE erneut, und der Codeausschnitt wird

Drücken Sie erneut die TAB-TASTE, und der Codeausschnitt wird erweitert.

So fügen Sie einen Codeausschnitt mit der Maus hinzu (C#, Visual Basic und XML) 1. Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten.

  1. Wählen Sie Codeausschnitt einfügen gefolgt von Meine Codeausschnitte aus.
  2. Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten, und wählen Sie Codeausschnitt einfügen aus. Klicken.

Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten, und wählen Sie Codeausschnitt einfügen aus.

Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.