Freigeben über

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

Nach Web Camps Team

Download Web Camps Training Kit

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

Mit diesem Ziel erstellen Sie zuerst den Controller, der die CRUD-Aktionen (Create, Read, Update and Delete) von Alben unterstützt. Sie generieren eine Indexansichtsvorlage, die ASP.NET MVC-Gerüstfunktion nutzt, 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 mit Hilfe von Formularelementen wie Dropdowns ändern können.

Schließlich können Sie Benutzern das Löschen eines Albums ermöglichen, und Außerdem verhindern Sie, dass benutzer falsche Daten eingeben, indem Sie ihre Eingabe überprüfen.

In diesem praktischen Übungslabor wird davon ausgegangen, dass Sie grundlegende Kenntnisse über ASP.NET MVC haben. Wenn Sie ASP.NET MVC noch nicht verwendet haben, empfehlen wir Ihnen, ASP.NET MVC Fundamentals Hands-on Lab zu durchlaufen.

Diese Übung führt Sie durch die Verbesserungen und neuen Features, die zuvor beschrieben wurden, indem kleinere Änderungen auf eine Beispielwebanwendung angewendet werden, die im Quellordner bereitgestellt wird.

Hinweis

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

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

  • 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-Hilfsprogramms
  • Erstellen und Anpassen einer Bearbeitungsansicht
  • Unterscheiden zwischen Aktionsmethoden, die auf HTTP-GET- oder HTTP-POST-Aufrufe reagieren
  • Hinzufügen und Anpassen einer Erstellungsansicht
  • Behandeln des Löschens einer Entität
  • Validieren von Benutzereingaben

Voraussetzungen

Sie müssen über die folgenden Elemente verfügen, um diese Übung abzuschließen:

Setup

Installieren von Codeausschnitten

Aus Gründen der Einfachheit ist ein Großteil des Codes, den Sie entlang dieser Übung 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 Snippets nicht vertraut sind und erfahren möchten, wie Sie sie verwenden können, finden Sie in diesem Dokument den Anhang "Anhang B: Verwenden von Codeausschnitten".

Übungen

Die folgenden Übungen bilden dieses praktische Labor:

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

Hinweis

Jede Übung wird von einem Endordner 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 Durcharbeiten der Übungen benötigen.

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

Übung 1: Erstellen des Store-Manager-Controllers und seiner Indexansicht

In dieser Übung erfahren Sie, wie Sie einen neuen Controller zur Unterstützung von CRUD-Vorgängen erstellen, seine Index-Aktionsmethode anpassen, um eine Liste von Alben aus der Datenbank zurückzugeben und schließlich eine Indexansichtsvorlage zu generieren, die das ASP.NET Gerüstfeature 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 ", um CRUD-Vorgänge zu unterstützen.

  1. Öffnen Sie die Begin-Lösung unter Source/Ex1-CreatingTheStoreManagerController/Begin/ Folder.

    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 Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

  2. Fügen Sie einen neuen Controller hinzu. Klicken Sie dazu 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 der 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-/Schreibzugriff hinzuzufügen, werden stubische Methoden für diese erstellt, allgemeine CRUD-Aktionen mit ausgefüllten TODO-Kommentaren erstellt, und sie werden aufgefordert, 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-Direktiven 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 Instanz von MusicStoreEntities zu speichern.

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - 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 Controller-Aktionslogik ähnelt der zuvor geschriebenen Index-Aktion des StoreControllers. Verwenden Sie LINQ, um alle Alben abzurufen, einschließlich Genre- und Künstlerinformationen zur Anzeige.

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - 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 Indexansichtsvorlage, um die Liste der Alben anzuzeigen, die vom StoreManager Controller zurückgegeben werden.

  1. Bevor Sie die neue Ansichtsvorlage erstellen, sollten Sie das Projekt erstellen, damit das Dialogfeld "Ansicht hinzufügen" die zu verwendende Albumklasse kennt. Build auswählen | Erstellen Sie MvcMusicStore , um das Projekt zu erstellen.

  2. Klicken Sie mit der rechten Maustaste in die Index-Aktionsmethode, und wählen Sie "Ansicht hinzufügen" aus. Dadurch wird das Dialogfeld "Ansicht hinzufügen" angezeigt.

    Ansicht hinzufügen

    Hinzufügen einer Ansicht aus der Index-Methode

  3. Überprüfen Sie im Dialogfeld "Ansicht hinzufügen", ob der Ansichtsname "Index" ist. Wählen Sie die Option "Stark typografische Ansicht erstellen" aus, und wählen Sie "Album" (MvcMusicStore.Models) aus der Dropdownliste " Modellklasse " aus. Wählen Sie "Liste " aus der Dropdownliste "Gerüstvorlage " aus. Lassen Sie das Ansichtsmodul auf Razor und die anderen Felder 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üstfunktion erstellt wurde, damit sie die gewünschten Felder anzeigt.

Hinweis

Die Gerüstunterstützung in ASP.NET MVC generiert eine einfache Ansichtsvorlage, die alle Felder im Albummodell auflistet. Gerüste bieten eine schnelle Möglichkeit, um mit einer stark typierten Ansicht zu beginnen: Anstatt die Ansichtsvorlage manuell schreiben zu müssen, generiert Gerüste schnell eine Standardvorlage, und dann können Sie 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üst zum Anzeigen von Tabellendaten 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" gelöscht. Außerdem werden die Spalten GenreId und ArtistId geändert, um die verknüpften Klasseneigenschaften von Artist.Name und Genre.Name anzuzeigen und den Link "Details" zu entfernen. 

    <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 Vorlage "StoreManager Index View" 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 und deren Titel, Künstler und Genre angezeigt wird.

    Durchsuchen der Liste der Alben

    Durchsuchen der Liste der Alben

Übung 2: Hinzufügen eines HTML-Hilfsprogramms

Die StoreManager Index-Seite hat ein potenzielles Problem: Die Eigenschaften "Titel" und "Künstlername" können beide lang genug sein, um die Tabellenformatierung auszuwerfen. In dieser Übung erfahren Sie, wie Sie einen benutzerdefinierten HTML-Hilfsprogramm hinzufügen, um diesen Text abschneiden zu können.

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

Durchsuchen der Liste der Alben mit nicht abgeschnittenen Text

Durchsuchen der Liste der Alben mit nicht abgeschnittenen Text

Aufgabe 1 – Erweitern des HTML-Hilfsmoduls

In dieser Aufgabe fügen Sie dem HTML-Objekt, das in ASP.NET MVC-Ansichten verfügbar gemacht wird, eine neue Methode zum Abschneiden hinzu. Dazu 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-Lösung im Ordner "Source/Ex2-AddingAnHTMLHelper/Begin/Begin/ ". Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lö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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

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

  3. Fügen Sie den folgenden Code unterhalb 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 abschneiden zu können.

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

  2. Ersetzen Sie die Zeilen, die den Titel des Künstlernamens und 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, dass die Vorlage "StoreManager Index View" 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 der Spalte "Titel " und "Künstler " abgeschnitten werden.

    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, damit Store-Manager ein Album bearbeiten können. Sie durchsuchen die URL /StoreManager/Edit/id (id ist die eindeutige ID des zu bearbeitenden Albums), wodurch ein HTTP-GET-Aufruf an den Server erfolgt.

Die Aktion "Controller 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 übergeben sie dann an eine Ansichtsvorlage, um die HTML-Seite wieder an den Benutzer zu rendern. Diese Seite enthält ein <Formularelement> mit Textfeldern und Dropdowns zum Bearbeiten der Albumeigenschaften.

Sobald der Benutzer die Werte des Albumformulars aktualisiert und auf die Schaltfläche "Speichern " klickt, werden die Änderungen über einen HTTP-POST-Rückruf an /StoreManager/Edit/id übermittelt. Obwohl die URL im letzten Aufruf unverändert bleibt, identifiziert ASP.NET MVC, dass es sich diesmal um eine HTTP-POST handelt und daher eine andere Edit-Action-Methode ausführt (eine mit [HttpPost]).

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

In dieser Aufgabe implementieren Sie die HTTP-GET-Version der Edit-Action-Methode, um das entsprechende Album aus der Datenbank sowie eine Liste aller Genres und Künstler abzurufen. Sie packt diese Daten in das im letzten Schritt definierte StoreManagerViewModel-Objekt , das dann an eine Ansichtsvorlage übergeben wird, um die Antwort zu rendern.

  1. Öffnen Sie die Begin-Lösung , die sich im Ordner "Source/Ex3-CreatingTheEditView/Begin/Begin/ " befindet. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lö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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

  2. Öffnen Sie die StoreManagerController-Klasse . Erweitern Sie dazu den Ordner "Controller" , und doppelklicken Sie auf StoreManagerController.cs.

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

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - Ex3 StoreManagerController HTTP-GET Edit action)

    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.Mvc SelectList für Künstler und Genres anstelle der System.Collections.Generic List.

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

Aufgabe 2 – Erstellen der Bearbeitungsansicht

In dieser Aufgabe erstellen Sie eine Bearbeitungsansichtsvorlage, die später die Albumeigenschaften anzeigt.

  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 typografische Ansicht erstellen", und wählen Sie "Album " (MvcMusicStore.Models) aus der Dropdownliste "Datenklasse anzeigen" aus. Wählen Sie "Bearbeiten" aus der Dropdownliste "Gerüstvorlage" aus. Belassen Sie die anderen Felder mit ihrem Standardwert, 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 " StoreManager-Ansicht bearbeiten " die Werte der Eigenschaften 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 Werte der Eigenschaften für das übergebene Album angezeigt werden.

    Bearbeitungsansicht des Albums durchsuchen

    Ansicht 'Album bearbeiten'

Aufgabe 4 – Implementieren von Dropdowns in der Album-Editor-Vorlage

In dieser Aufgabe fügen Sie der Ansichtsvorlage, die in der letzten Aufgabe erstellt wurde, Dropdowns hinzu, damit der Benutzer aus einer Liste der Künstler und Genres auswählen kann.

  1. Ersetzen Sie den gesamten Album-Fieldset-Code 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 Dropdowns für die Auswahl von Künstlern und Genres zu rendern. Die parameter, die an Html.DropDownList übergeben werden, sind:

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

Aufgabe 5 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass auf der Seite " StoreManager-Ansicht bearbeiten " Dropdowns anstelle von Textfeldern "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 Dropdowns anstelle von Textfeldern für Künstler- und Genre-ID angezeigt werden.

    Durchsuchen der Bearbeitungsansicht eines Albums mit Dropdowns

    Ansicht "Album bearbeiten" dieses Mal mit Dropdowns

Aufgabe 6 – Implementieren der HTTP-POST Edit-Aktionsmethode

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

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

  2. Ersetzen Sie den Code der HTTP-POST Edit-Aktion durch den folgenden Code (beachten Sie, dass die zu ersetzende Methode eine überladene Version ist, die zwei Parameter empfängt):

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - Ex3 StoreManagerController HTTP-POST Edit Action)

    [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 einen HTTP-POST der Formularwerte zurück an den Server ausführt, um sie in der Datenbank zu speichern. Der Dekorateur [HttpPost] gibt an, dass die Methode für diese HTTP-POST-Szenarien verwendet werden soll. Die Methode verwendet ein Album-Objekt . 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 an die Indexansicht um.

    2. Wenn das Modell ungültig ist, füllt es das ViewBag mit der GenreId und ArtistId auf, und es gibt die Ansicht mit dem empfangenen Albumobjekt zurück, damit der Benutzer alle erforderlichen Aktualisierungen ausführen kann.

Aufgabe 7 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass die Seite "StoreManager-Ansicht bearbeiten " die aktualisierten Albumdaten 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 Titel des Albums in "Laden", und klicken Sie auf "Speichern". Überprüfen Sie, ob der Titel des Albums tatsächlich in der Liste der Alben geändert wurde.

    Aktualisieren eines Albums

    Aktualisieren eines Albums

Übung 4: Hinzufügen einer Ansicht "Erstellen"

Nachdem der StoreManagerController die Bearbeitungsmöglichkeit unterstützt, erfahren Sie in dieser Übung, wie Sie eine Vorlage "Ansicht erstellen" hinzufügen, damit Store-Manager der Anwendung neue Alben hinzufügen können.

Wie bei der Funktion "Bearbeiten" implementieren Sie das Szenario "Erstellen" mit zwei separaten Methoden in der StoreManagerController-Klasse :

  1. Eine Aktionsmethode zeigt ein leeres Formular an, wenn Store-Manager zuerst die URL "/StoreManager/Create " besuchen.
  2. Eine zweite Aktionsmethode behandelt das Szenario, in dem der Store-Manager auf die Schaltfläche "Speichern " im Formular klickt, und sendet die Werte als HTTP-POST an den /StoreManager/Create-URL zurück.

Aufgabe 1 – Implementieren der HTTP-GET Create-Aktionsmethode

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

  1. Öffnen Sie die Begin-Lösung unter Source/Ex4-AddingACreateView/Begin/ Folder. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lö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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

  2. Open StoreManagerController-Klasse . Erweitern Sie dazu den Ordner "Controller" , und doppelklicken Sie auf StoreManagerController.cs.

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

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP-GET Create action)

    //
// 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 Methode "Aktion erstellen", und wählen Sie "Ansicht hinzufügen" aus. Dadurch wird das Dialogfeld "Ansicht hinzufügen" angezeigt.

  2. Überprüfen Sie im Dialogfeld "Ansicht hinzufügen", ob der Ansichtsname erstellt ist. Wählen Sie die Option "Ansicht mit starkem Typ erstellen" und dann "Album " (MvcMusicStore.Models) aus der Dropdownliste "Modellklasse" und "Erstellen" aus der Dropdownliste "Gerüstvorlage erstellen" aus. Belassen Sie die anderen Felder mit ihrem Standardwert, und klicken Sie dann auf "Hinzufügen".

    Hinzufügen einer Erstellungsansicht

    Hinzufügen der Ansicht "Erstellen"

  3. Aktualisieren Sie die Felder "GenreId " und "ArtistId ", um eine Dropdownliste wie unten dargestellt 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 "StoreManager-Ansicht erstellen " 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.

    Ansicht mit einem leeren Formular erstellen

    Ansicht mit einem leeren Formular erstellen

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 den Browser bei Bedarf, um zum Visual Studio-Fenster zurückzukehren. Open StoreManagerController-Klasse . Erweitern Sie dazu den Ordner "Controller" , und doppelklicken Sie auf StoreManagerController.cs.

  2. Ersetzen Sie den Code der HTTP-POST Create-Aktionsmethode durch Folgendes:

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - 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 sie 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 umleitet.

  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 gerade erstellte neue Album enthält.

    Neues Album erstellt

    Neues Album erstellt

Übung 5: Behandeln von Löschungen

Die Möglichkeit zum Löschen von Alben ist noch nicht implementiert. Dies ist, worum es bei dieser Übung geht. Wie zuvor implementieren Sie das Delete-Szenario mit zwei separaten Methoden in 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 des Albums abzurufen.

  1. Öffnen Sie die Begin-Lösung , die sich im Ordner "Source/Ex5-HandlingDeletion/Begin/ " befindet. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lö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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

  2. Open StoreManagerController-Klasse . Erweitern Sie dazu den Ordner "Controller" , und doppelklicken Sie auf StoreManagerController.cs.

  3. Die Aktion "Controller löschen" entspricht genau der vorherigen Aktion des Store-Details-Controllers: Sie fragt das Albumobjekt aus der Datenbank mithilfe der in der URL angegebenen ID ab und gibt die entsprechende Ansicht zurück. Ersetzen Sie dazu den HTTP-GET Delete-Aktionsmethodencode durch Folgendes:

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - Ex5 Handling Delete HTTP-GET Delete action)

    //
// 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 Delete-Aktionsmethode, und wählen Sie "Ansicht hinzufügen" aus. Dadurch wird das Dialogfeld "Ansicht hinzufügen" angezeigt.

  5. Überprüfen Sie im Dialogfeld "Ansicht hinzufügen", ob der Ansichtsname "Löschen" lautet. Wählen Sie die Option "Stark typografische Ansicht erstellen" aus, und wählen Sie "Album " (MvcMusicStore.Models) aus der Dropdownliste " Modellklasse " aus. Wählen Sie "Löschen " aus der Dropdownliste "Gerüstvorlage " aus. Belassen Sie die anderen Felder mit ihrem Standardwert, 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 " StoreManager Delete View" ein Bestätigungslöschformular 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 Album aus, das gelöscht werden soll, indem Sie auf "Löschen" klicken und überprüfen, ob die neue Ansicht hochgeladen wurde.

    Der Screenshot zeigt einen ausgewählten Link

    Löschen eines Albums

Aufgabe 3: Implementieren der HTTP-POST-Löschaktionsmethode

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 den Browser bei Bedarf, um zum Visual Studio-Fenster zurückzukehren. Open StoreManagerController-Klasse . Erweitern Sie dazu den Ordner "Controller" , und doppelklicken Sie auf StoreManagerController.cs.

  2. Ersetzen Sie den Http-POST Delete-Aktionsmethodencode durch Folgendes:

    (Codeausschnitt - ASP.NET MVC 4 Helpers and Forms and Validation - Ex5 Handling Delete HTTP-POST Delete Action)

    //
// 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 Delete View" ein Album löschen und dann zur StoreManager-Indexansicht umleitet.

  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 Album aus, das gelöscht werden soll, indem Sie auf "Löschen" klicken. Bestätigen Sie den Löschvorgang, indem Sie auf die Schaltfläche "Löschen" klicken:

    Screenshot des Fensters

    Löschen eines Albums

  3. Überprüfen Sie, ob das Album gelöscht wurde, da es nicht auf der Indexseite angezeigt wird.

Übung 6: Hinzufügen der Validierung

Derzeit führen die von Ihnen eingerichteten Formulare zum Erstellen und Bearbeiten keine Überprüfung aus. Wenn der Benutzer ein Pflichtfeld leer lässt oder Buchstaben in das Preisfeld eingibt, stammt der erste Fehler, den Sie erhalten, aus der Datenbank.

Sie können der Anwendung eine Überprüfung 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 geeigneter Nachrichten für Benutzer.

Aufgabe 1 – Hinzufügen von Datenanmerkungen

In dieser Aufgabe fügen Sie dem Albummodell Datenanmerkungen hinzu, die die Überprüfungsmeldungen der Seite erstellen und bearbeiten bei Bedarf anzeigen.

Für eine einfache Model-Klasse wird das Hinzufügen einer Datenanmerkung einfach behandelt, indem eine using-Anweisung für System.ComponentModel.DataAnnotation hinzugefügt und dann ein [Required]-Attribut für die entsprechenden Eigenschaften platziert wird. Im folgenden Beispiel wird die Name-Eigenschaft in der Ansicht zu einem erforderlichen Feld.

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 datenanmerkungen direkt zu den Modellklassen hinzugefügt haben, werden diese überschrieben, wenn Sie das Modell aus der Datenbank aktualisieren. Stattdessen können Sie Metadatenteilklassen verwenden, die zum Speichern der Anmerkungen vorhanden sind und den Modellklassen mithilfe des [MetadataType] -Attributs zugeordnet sind.

  1. Öffnen Sie die Begin-Lösung unter Source/Ex6-AddingValidation/Begin/ Folder. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lö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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

  2. Öffnen Sie die Album.cs aus dem Ordner "Models".

  3. Ersetzen Sie Album.cs Inhalt durch den hervorgehobenen Code, damit 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. Mit dieser Einstellung wird eine Ausnahme vermieden, wenn das Entity Framework dem Modell Nullwerte zuweist, bevor die Felder von Datenanmerkungen überprüft werden.

    (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 Albumteilklasse weist ein MetadataType-Attribut auf, das auf die AlbumMetaData-Klasse für die Data Annotations verweist. Dies sind einige der Datenanmerkungsattribute, die Sie zum Kommentieren des Albummodells verwenden:

    • Erforderlich – Gibt an, dass die Eigenschaft ein Pflichtfeld ist.
    • DisplayName – Definiert den Text, der in Formularfeldern und Überprüfungsmeldungen 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 aus Editorformularen

Aufgabe 2 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, ob die Felder "Seiten erstellen" und "Bearbeiten" mithilfe der anzeigenamen überprüft werden, die in der letzten Aufgabe 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 den Anzeigenamen in der partiellen Klasse übereinstimmen (z . B. die Albumart-URL anstelle von AlbumArtUrl)

  3. Klicken Sie auf " Erstellen", ohne das Formular auszufüllen. Stellen Sie sicher, dass Sie die entsprechenden Überprüfungsmeldungen erhalten.

    Überprüfte Felder auf der Seite

    Überprüfte Felder auf der Seite "Erstellen"

  4. Sie können überprüfen, ob dasselbe mit der Seite "Bearbeiten" erfolgt. Ändern Sie die URL in "/StoreManager/Edit/1 ", und vergewissern Sie sich, dass die Anzeigenamen den Namen in der partiellen Klasse entsprechen (z . B. albumart-URL anstelle von AlbumArtUrl). Leeren Sie die Felder "Titel" und "Preis", und klicken Sie auf "Speichern". Stellen Sie sicher, dass Sie die entsprechenden Überprüfungsmeldungen erhalten.

    Überprüfte Felder auf der Seite

    Überprüfte Felder auf der Seite "Bearbeiten"

Übung 7: Verwenden von unaufdringlichen jQuery auf clientseitiger Seite

In dieser Übung erfahren Sie, wie Sie die MVC 4 Unobtrusive jQuery-Validierung auf clientseitiger Seite aktivieren.

Hinweis

Das unaufdringliche jQuery verwendet JavaScript mit dem Daten-Ajax-Präfix, um Aktionsmethoden auf dem Server aufzurufen, anstatt intrusiv inline-Clientskripts auszublenden.

Aufgabe 1 – Ausführen der Anwendung vor dem Aktivieren von unauffälligem jQuery

In dieser Aufgabe führen Sie die Anwendung vor dem Einschließen von jQuery aus, um beide Überprüfungsmodelle zu vergleichen.

  1. Öffnen Sie die Begin-Lösung unter Source/Ex7-UnobtrusivejQueryValidation/Begin/ folder. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lö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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

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

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

  3. Das Projekt beginnt auf der Startseite. Durchsuchen Sie /StoreManager/Create, und klicken Sie auf "Erstellen", ohne das Formular auszufüllen, um zu überprüfen, ob Sie Überprüfungsmeldungen 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 jQuery unauffällige Clientüberprüfung aus der Datei "Web.config ", die standardmäßig in allen neuen ASP.NET MVC 4-Projekten auf "false" festgelegt ist. Darüber hinaus fügen Sie die erforderlichen Skriptverweise hinzu, um jQuery Unobtrusive Client Validation zu funktionieren.

  1. Öffnen Sie die Datei "Web.Config" im 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 die Clientüberprüfung auch durch Code bei Global.asax.cs aktivieren, um die gleichen Ergebnisse zu erhalten:

    HtmlHelper.ClientValidationEnabled = true;

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

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

  3. Stellen Sie sicher, dass in der Ansicht über das Bundle "~/bundles/jqueryval" auf die folgenden Skriptdateien jquery.validate und jquery.validate.unobtrusive 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 Überprüfungsbibliotheken funktionieren, müssen Sie einen Verweis auf die jQuery-Frameworkbibliothek hinzufügen. Da dieser Verweis bereits in der Datei _Layout.cshtml hinzugefügt wird, müssen Sie ihn nicht in dieser bestimmten Ansicht hinzufügen.

Aufgabe 3 : Ausführen der Anwendung mit unauffälliger jQuery-Validierung

In dieser Aufgabe testen Sie, dass die StoreManager-Ansichtsvorlage eine 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. Durchsuchen Sie /StoreManager/Create, und klicken Sie auf "Erstellen", ohne das Formular auszufüllen, um zu überprüfen, ob Sie Überprüfungsmeldungen erhalten:

    Clientüberprüfung mit aktivierter jQuery

    Clientüberprüfung 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 Clientüberprüfungsregel fügt Unbtrusive jQuery ein Attribut mit data-val-rulename="message" hinzu. Nachfolgend finden Sie eine Liste von Tags, die unaufdringlich jQuery in das HTML-Eingabefeld einfügt, um die Clientüberprüfung durchzuführen:

    • Data-val
    • 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 dem Modell "Datenanmerkung" gefüllt. Anschließend kann die gesamte Logik, die auf serverseitiger Seite funktioniert, auf clientseitiger Ebene 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 Unobtrusive 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

Wenn Sie diese praktische Übung abschließen, haben Sie erfahren, wie Sie Benutzern das Ändern der in der Datenbank gespeicherten Daten mithilfe der folgenden Möglichkeiten ermöglichen:

  • Controlleraktionen wie Index, Erstellen, Bearbeiten, Löschen
  • ASP.NET MVC-Gerüstfunktion zum Anzeigen von Eigenschaften in einer HTML-Tabelle
  • Benutzerdefinierte HTML-Hilfsprogramme zur Verbesserung der Benutzererfahrung
  • Aktionsmethoden, die auf HTTP-GET- oder HTTP-POST-Aufrufe reagieren
  • Eine freigegebene Editorvorlage für ähnliche Ansichtsvorlagen wie "Erstellen und Bearbeiten"
  • Formularelemente wie Dropdowns
  • Datenanmerkungen für die Modellüberprüfung
  • Clientseitige Überprüfung mithilfe der jQuery Unobtrusive-Bibliothek

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

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

  1. Wechseln Sie zu [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Wenn Sie das Webplattform-Installationsprogramm bereits installiert haben, können Sie es öffnen und nach dem Produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" suchen.

  2. Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.

  3. Klicken Sie nach dem Öffnen des Webplattform-Installers 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 den Vorgang fortzusetzen.

    Akzeptieren der Lizenzbedingungen

    Akzeptieren der Lizenzbedingungen

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

    Installationsfortschritt

    Installationsfortschritt

  6. Wenn die Installation abgeschlossen ist, klicken Sie 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 VS Express für Webkachel.

    VS Express für Webkachel

    VS Express für Webkachel

Anhang B: Verwenden von Codeausschnitten

Mit Codeausschnitten verfügen Sie über den gesamten Code, den Sie benötigen, jederzeit. Das Lab-Dokument teilt Ihnen genau mit, wann Sie sie verwenden können, wie in der folgenden Abbildung dargestellt.

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 halten Sie die Eingabe, bis der Name des gesamten Codeausschnitts 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 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 erneut die TAB-TASTE, und der Codeausschnitt wird erweitert.

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

So fügen Sie einen Codeausschnitt mit der Maus (C#, Visual Basic und XML) 1 hinzu. 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 "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

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.