Teil 3: Ansichten und ViewModels

von Jon Galloway

Der MVC Music Store ist eine Tutorialanwendung, die schrittweise erläutert, wie ASP.NET MVC und Visual Studio für die Webentwicklung verwendet werden.

Der MVC Music Store ist eine einfache Beispielspeicherimplementierung, die Musikalben online verkauft und grundlegende Websiteverwaltung, Benutzeranmeldung und Warenkorbfunktionen implementiert.

In dieser Tutorialreihe werden alle Schritte zum Erstellen der ASP.NET MVC Music Store-Beispielanwendung beschrieben. Teil 3 behandelt Ansichten und ViewModels.

Bisher haben wir nur Zeichenfolgen aus Controlleraktionen zurückgegeben. Dies ist eine gute Möglichkeit, sich eine Vorstellung davon zu verschaffen, wie Controller funktionieren, aber es ist nicht, wie Sie eine echte Webanwendung erstellen möchten. Wir wünschen uns eine bessere Möglichkeit, HTML zurück zu Browsern zu generieren, die unsere Website besuchen – eine, in der wir Vorlagendateien verwenden können, um den HTML-Inhalt einfacher anzupassen, der zurück gesendet wird. Das ist genau das, was Ansichten tun.

Hinzufügen einer Ansichtsvorlage

Um eine Ansichtsvorlage zu verwenden, ändern wir die HomeController Index-Methode, um ein ActionResult zurückzugeben, und lassen sie View() wie folgt zurückgeben:

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

Die obige Änderung gibt an, dass anstelle einer Zeichenfolge stattdessen eine "Ansicht" verwendet werden soll, um ein Ergebnis zurück zu generieren.

Wir fügen nun eine geeignete Ansichtsvorlage zu unserem Projekt hinzu. Dazu positionieren wir den Textcursor in der Index-Aktionsmethode, klicken dann mit der rechten Maustaste, und wählen Sie "Ansicht hinzufügen" aus. Dadurch wird das Dialogfeld Ansicht hinzufügen angezeigt:

"

Das Dialogfeld "Ansicht hinzufügen" ermöglicht es uns, schnell und einfach Ansichtsvorlagendateien zu generieren. Standardmäßig füllt das Dialogfeld "Ansicht hinzufügen" den Namen der zu erstellenden Ansichtsvorlage vorab auf, sodass er mit der Aktionsmethode übereinstimmt, die sie verwendet. Da wir das Kontextmenü "Ansicht hinzufügen" in der Index()-Aktionsmethode unseres HomeControllers verwendet haben, ist im dialogfeld "Ansicht hinzufügen" oben standardmäßig "Index" als Ansichtsname vorausgefüllt. Wir müssen keine der Optionen in diesem Dialogfeld ändern, also klicken Sie auf die Schaltfläche Hinzufügen.

Wenn wir auf die Schaltfläche Hinzufügen klicken, erstellt Visual Web Developer eine neue Index.cshtml-Ansichtsvorlage für uns im Verzeichnis \Views\Home und erstellt den Ordner, sofern noch nicht vorhanden.

Der Name und Der Ordnerspeicherort der Datei "Index.cshtml" ist wichtig und folgt den Standardnamenskonventionen ASP.NET MVC. Der Verzeichnisname \Views\Home stimmt mit dem Controller überein, der den Namen HomeController trägt. Der Name der Ansichtsvorlage Index stimmt mit der Controlleraktionsmethode überein, die die Ansicht anzeigt.

ASP.NET MVC können wir vermeiden, dass der Name oder der Speicherort einer Ansichtsvorlage explizit angegeben werden muss, wenn wir diese Benennungskonvention verwenden, um eine Ansicht zurückzugeben. Standardmäßig wird die Ansichtsvorlage \Views\Home\Index.cshtml gerendert, wenn code wie unten in unserem HomeController geschrieben wird:

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

Visual Web Developer hat die Ansichtsvorlage "Index.cshtml" erstellt und geöffnet, nachdem wir im Dialogfeld "Ansicht hinzufügen" auf die Schaltfläche "Hinzufügen" geklickt haben. Der Inhalt von Index.cshtml ist unten dargestellt.

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

Diese Ansicht verwendet die Razor-Syntax, die präziser ist als die Web Forms Ansichts-Engine, die in ASP.NET Web Forms und früheren Versionen von ASP.NET MVC verwendet wurde. Die Web Forms-Ansichts-Engine ist weiterhin in ASP.NET MVC 3 verfügbar, aber viele Entwickler finden, dass die Razor-Ansichts-Engine ASP.NET MVC-Entwicklung wirklich gut passt.

Die ersten drei Zeilen legen den Seitentitel mithilfe von ViewBag.Title fest. Wir werden uns in Kürze genauer ansehen, wie dies funktioniert, aber zuerst aktualisieren wir den Textüberschrifttext und zeigen die Seite an. Aktualisieren Sie das <h2-Tag> , um "This is the Home Page" (Dies ist die Startseite) wie unten dargestellt zu sagen.

@{
    ViewBag.Title = "Index";
}
<h2>This is the Home Page</h2>

Wenn Sie die Anwendung ausführen, wird angezeigt, dass der neue Text auf der Startseite angezeigt wird.

Verwenden eines Layouts für allgemeine Websiteelemente

Die meisten Websites verfügen über Inhalte, die von vielen Seiten gemeinsam genutzt werden: Navigation, Fußzeilen, Logobilder, Stylesheet-Verweise usw. Die Razor-Ansichts-Engine erleichtert die Verwaltung mithilfe einer Seite namens _Layout.cshtml, die automatisch im Ordner /Views/Shared für uns erstellt wurde.

Doppelklicken Sie auf diesen Ordner, um den Inhalt anzuzeigen, der unten angezeigt wird.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"     
            type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
            type="text/javascript"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

Der Inhalt unserer einzelnen Ansichten wird durch den @RenderBody() Befehl angezeigt, und alle allgemeinen Inhalte, die außerhalb von angezeigt werden sollen, können dem _Layout.cshtml-Markup hinzugefügt werden. Wir möchten, dass unser MVC Music Store über eine gemeinsame Kopfzeile mit Links zu unserer Startseite und dem Store-Bereich auf allen Seiten auf der Website verfügt, daher fügen wir diese direkt über dieser @RenderBody() Anweisung zur Vorlage hinzu.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"></script>
</head>
<body>
    <div id="header">
        <h1>
            ASP.NET MVC MUSIC STORE</h1>
        <ul id="navlist">
            <li class="first"><a href="/"
id="current">Home</a></li>
            <li><a
href="/Store/">Store</a></li>
        </ul>
    </div>
    @RenderBody()
</body>
</html>

Aktualisieren des StyleSheets

Die leere Projektvorlage enthält eine sehr optimierte CSS-Datei, die nur Stile enthält, die zum Anzeigen von Validierungsmeldungen verwendet werden. Unser Designer hat einige zusätzliche CSS- und Bilder bereitgestellt, um das Aussehen und Verhalten für unsere Website zu definieren, daher fügen wir diese jetzt hinzu.

Die aktualisierte CSS-Datei und Die Bilder sind im Inhaltsverzeichnis von MvcMusicStore-Assets.zip enthalten, das im MVC-Music-Store verfügbar ist. Wir wählen beide in Windows Explorer aus und legen sie in Visual Web Developer im Ordner Inhalt der Projektmappe ab, wie unten gezeigt:

Sie werden aufgefordert zu bestätigen, ob Sie die vorhandene Datei Site.css überschreiben möchten. Klicken Sie auf „Ja“.

Der Ordner Inhalt Ihrer Anwendung wird nun wie folgt angezeigt:

Nun führen wir die Anwendung aus, und sehen wir uns an, wie unsere Änderungen auf der Startseite aussehen.

• Sehen wir uns die Änderungen an: Die Index-Aktionsmethode des HomeControllers hat die Vorlage \Views\Home\Index.cshtmlView gefunden und angezeigt, obwohl unser Code "return View()" heißt, da unsere Ansichtsvorlage der Standardbenennungskonvention folgte.
• Die Startseite zeigt eine einfache Willkommensnachricht an, die in der Ansichtsvorlage \Views\Home\Index.cshtml definiert ist.
• Die Startseite verwendet unsere _Layout.cshtml-Vorlage, sodass die Willkommensnachricht im HTML-Standardlayout der Website enthalten ist.

Verwenden eines Modells zum Übergeben von Informationen an unsere Ansicht

Eine Ansichtsvorlage, die nur hartcodiertes HTML anzeigt, macht keine sehr interessante Website aus. Um eine dynamische Website zu erstellen, möchten wir stattdessen Informationen von unseren Controlleraktionen an unsere Ansichtsvorlagen übergeben.

Im Model-View-Controller-Muster bezieht sich der Begriff Modell auf Objekte, die die Daten in der Anwendung darstellen. Modellobjekte entsprechen häufig Tabellen in Ihrer Datenbank, müssen dies jedoch nicht.

Controlleraktionsmethoden, die ein ActionResult zurückgeben, können ein Modellobjekt an die Ansicht übergeben. Dadurch kann ein Controller alle Informationen, die zum Generieren einer Antwort erforderlich sind, sauber packen und diese Informationen dann an eine Ansichtsvorlage übergeben, die zum Generieren der entsprechenden HTML-Antwort verwendet wird. Dies ist am einfachsten zu verstehen, indem Sie es in Aktion sehen, also beginnen wir.

Zuerst erstellen wir einige Modellklassen, um Genres und Alben in unserem Store darzustellen. Beginnen wir mit der Erstellung einer Genre-Klasse. Klicken Sie mit der rechten Maustaste auf den Ordner "Models" in Ihrem Projekt, wählen Sie die Option "Klasse hinzufügen" aus, und nennen Sie die Datei "Genre.cs".

Fügen Sie dann der erstellten Klasse eine öffentliche Name-Zeichenfolgeneigenschaft hinzu:

public class Genre
{
    public string Name { get; set; }
}

Hinweis: Falls Sie sich fragen, verwendet die Notation { get; set; } das feature automatisch implementierte Eigenschaften von C#. Dies bietet uns die Vorteile einer Eigenschaft, ohne dass wir ein Rückfeld deklarieren müssen.

Führen Sie als Nächstes die gleichen Schritte aus, um eine Album-Klasse (mit dem Namen Album.cs) zu erstellen, die über eine Title- und eine Genre-Eigenschaft verfügt:

public class Album
{
    public string Title { get; set; }
    public Genre Genre { get; set; }
}

Jetzt können wir den StoreController so ändern, dass Ansichten verwendet werden, die dynamische Informationen aus unserem Modell anzeigen. Wenn wir - zu Demonstrationszwecken gerade jetzt - unsere Alben basierend auf der Anforderungs-ID benannt haben, könnten wir diese Informationen wie in der folgenden Ansicht anzeigen.

Wir beginnen damit, die Aktion Store-Details so zu ändern, dass die Informationen für ein einzelnes Album angezeigt werden. Fügen Sie oben in der StoreControllers-Klasse eine using-Anweisung hinzu, um den MvcMusicStore.Models-Namespace einzuschließen, sodass wir nicht jedes Mal MvcMusicStore.Models.Album eingeben müssen, wenn wir die Albumklasse verwenden möchten. Der Abschnitt "usings" dieser Klasse sollte nun wie folgt angezeigt werden.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;

Als Nächstes aktualisieren wir die Detailcontrolleraktion, sodass sie ein ActionResult anstelle einer Zeichenfolge zurückgibt, wie dies bei der Index-Methode des HomeControllers der Fall war.

public ActionResult Details(int id)

Jetzt können wir die Logik so ändern, dass ein Album-Objekt in die Ansicht zurückgegeben wird. Später in diesem Tutorial rufen wir die Daten aus einer Datenbank ab. Für den Moment verwenden wir jedoch "Dummydaten", um zu beginnen.

public ActionResult Details(int id)
 {
    var album = new Album { Title = "Album " + id };
    return View(album);
 }

Hinweis: Wenn Sie mit C# nicht vertraut sind, können Sie davon ausgehen, dass die Verwendung von var bedeutet, dass unsere Albumvariable spät gebunden ist. Das ist nicht richtig. Der C#-Compiler verwendet typbasierte Rückschlüsse basierend auf dem, was wir der Variablen zuweisen, um zu bestimmen, dass album vom Typ Album ist, und kompiliert die lokale Albumvariable als Albumtyp, sodass wir die Kompilierzeitüberprüfung und Visual Studio-Code-Editor-Unterstützung erhalten.

Nun erstellen wir eine Ansichtsvorlage, die unser Album verwendet, um eine HTML-Antwort zu generieren. Bevor wir dies tun, müssen wir das Projekt so erstellen, dass das Dialogfeld Ansicht hinzufügen unsere neu erstellte Albumklasse kennt. Sie können das Projekt erstellen, indem Sie das Menüelement Debuggen⇨MvcMusicStore erstellen auswählen (für zusätzlichen Kredit können Sie die Tastenkombination STRG-UMSCHALT-B verwenden, um das Projekt zu erstellen).

Nachdem wir nun unsere unterstützenden Klassen eingerichtet haben, können wir unsere Ansichtsvorlage erstellen. Klicken Sie mit der rechten Maustaste in die Detailmethode, und wählen Sie "Ansicht hinzufügen..." aus. über das Kontextmenü.

Wir erstellen eine neue Ansichtsvorlage wie zuvor mit dem HomeController. Da wir es aus dem StoreController erstellen, wird er standardmäßig in einer \Views\Store\Index.cshtml-Datei generiert.

Im Gegensatz zu früher aktivieren wir das Kontrollkästchen "Stark typisierte Ansicht erstellen". Anschließend wählen Sie in der Dropdownliste "Datenklasse anzeigen" die Klasse "Album" aus. Dies führt dazu, dass im Dialogfeld "Ansicht hinzufügen" eine Ansichtsvorlage erstellt wird, die erwartet, dass ein Album-Objekt zur Verwendung an das Objekt übergeben wird.

Wenn wir auf die Schaltfläche "Hinzufügen" klicken, wird die Vorlage \Views\Store\Details.cshtml View erstellt, die den folgenden Code enthält.

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

Beachten Sie die erste Zeile, die angibt, dass diese Ansicht stark für unsere Album-Klasse typisiert ist. Die Razor-Ansichts-Engine weiß, dass ein Album-Objekt übergeben wurde, sodass wir problemlos auf Modelleigenschaften zugreifen und sogar den Vorteil von IntelliSense im Visual Web Developer-Editor nutzen können.

Aktualisieren Sie das <h2-Tag> , sodass die Title-Eigenschaft des Albums angezeigt wird, indem Sie diese Zeile wie folgt ändern.

<h2>Album: @Model.Title</h2>

Beachten Sie, dass IntelliSense ausgelöst wird, wenn Sie den Zeitraum nach dem @Model Schlüsselwort (keyword) eingeben, wobei die Eigenschaften und Methoden angezeigt werden, die von der Album-Klasse unterstützt werden.

Lassen Sie uns nun unser Projekt erneut ausführen und die URL /Store/Details/5 aufrufen. Wir sehen Details zu einem Album wie unten.

Nun nehmen wir ein ähnliches Update für die Aktionsmethode Store Browse vor. Aktualisieren Sie die Methode, sodass sie ein ActionResult zurückgibt, und ändern Sie die Methodenlogik so, dass ein neues Genre-Objekt erstellt und an view zurückgegeben wird.

public ActionResult Browse(string genre)
 {
    var genreModel = new Genre { Name = genre };
    return View(genreModel);
 }

Klicken Sie mit der rechten Maustaste auf die Browse-Methode, und wählen Sie "Ansicht hinzufügen..." aus. fügen Sie im Kontextmenü eine Ansicht hinzu, die stark typisiert ist, und fügen Sie der Genre-Klasse eine stark typisierte hinzu.

Aktualisieren Sie das <h2-Element> im Ansichtscode (in /Views/Store/Browse.cshtml), um die Genreinformationen anzuzeigen.

@model MvcMusicStore.Models.Genre
@{
    ViewBag.Title = "Browse";
}
<h2>Browsing Genre: @Model.Name</h2>

Nun führen wir unser Projekt erneut aus, und navigieren Sie zu /Store/Browse? Genre=Disco-URL. Die Seite Durchsuchen wird wie unten angezeigt.

Schließlich führen wir eine etwas komplexere Aktualisierung der Aktionsmethode Store Index und der Ansicht durch, um eine Liste aller Genres in unserem Store anzuzeigen. Dazu verwenden wir eine Liste von Genres als Modellobjekt und nicht nur ein einzelnes Genre.

public ActionResult Index()
{
    var genres = new List<Genre>
    {
        new Genre { Name = "Disco"},
        new Genre { Name = "Jazz"},
        new Genre { Name = "Rock"}
    };
    return View(genres);
 }

Klicken Sie mit der rechten Maustaste auf die Aktion "Index speichern", und wählen Sie Ansicht wie zuvor hinzufügen aus, wählen Sie Genre als Modellklasse aus, und klicken Sie auf die Schaltfläche Hinzufügen.

Zunächst ändern wir die @model Deklaration, um anzugeben, dass die Ansicht mehrere Genre-Objekte erwartet und nicht nur eins. Ändern Sie die erste Zeile von /Store/Index.cshtml wie folgt:

@model IEnumerable<MvcMusicStore.Models.Genre>

Dies teilt der Razor-Ansichts-Engine mit, dass sie mit einem Modellobjekt arbeitet, das mehrere Genre-Objekte enthalten kann. Wir verwenden ein IEnumerable-Genre<> anstelle eines Listengenres<>, da es generischer ist, sodass wir den Modelltyp später in einen beliebigen Objekttyp ändern können, der die IEnumerable-Schnittstelle unterstützt.

Als Nächstes durchlaufen wir die Genre-Objekte im Modell, wie im code der vollständigen Ansicht unten gezeigt.

@model IEnumerable<MvcMusicStore.Models.Genre>
@{
    ViewBag.Title = "Store";
}
<h3>Browse Genres</h3>
<p>
    Select from @Model.Count()
genres:</p>
<ul>
    @foreach (var genre in Model)
    {
        <li>@genre.Name</li>
    }
</ul>

Beachten Sie, dass wir bei der Eingabe dieses Codes über vollständige IntelliSense-Unterstützung verfügen, sodass bei der Eingabe von "@Model." alle Methoden und Eigenschaften angezeigt werden, die von einer IEnumerable vom Typ Genre unterstützt werden.

In unserer "foreach"-Schleife weiß Visual Web Developer, dass jedes Element vom Typ Genre ist. Daher sehen wir IntelliSense für jeden Genretyp.

Als Nächstes untersuchte das Gerüstbaufeature das Genre-Objekt und stellte fest, dass jedes Objekt über eine Name-Eigenschaft verfügt, sodass es durchläuft und ausschreibt. Außerdem werden Links zum Bearbeiten, Details und Löschen zu jedem einzelnen Element generiert. Wir werden dies später in unserem Store-Manager nutzen, aber für den Zeitpunkt möchten wir stattdessen eine einfache Liste haben.

Wenn wir die Anwendung ausführen und zu /Store navigieren, sehen wir, dass sowohl die Anzahl als auch die Liste der Genres angezeigt wird.

Hinzufügen von Links zwischen Seiten

In der /Store-URL, die Genres auflistet, werden die Genrenamen derzeit einfach als Nur-Text aufgelistet. Ändern wir dies so, dass anstelle von Nur-Text stattdessen der Link Genrenamen zur entsprechenden /Store/Browse-URL vorhanden ist, sodass durch Klicken auf ein Musikgenre wie "Disco" zur Url "/Store/Browse?genre=Disco" navigiert wird. Wir könnten unsere \Views\Store\Index.cshtml-Ansichtsvorlage aktualisieren, um diese Links mithilfe von Code wie unten auszugeben (geben Sie dies nicht ein, wir werden ihn verbessern).:

<ul>
    @foreach (var genre in Model)
    {
        <li><a href="/Store/Browse?genre=@genre.Name">@genre.Name</a></li>
    }
</ul>

Das funktioniert, aber es kann später zu Problemen führen, da es auf einer hartcodierten Zeichenfolge basiert. Wenn wir den Controller für instance umbenennen möchten, müssen wir unseren Code durchsuchen, um nach Links zu suchen, die aktualisiert werden müssen.

Ein alternativer Ansatz, den wir verwenden können, ist die Nutzung einer HTML-Hilfsmethode. ASP.NET MVC enthält HTML-Hilfsmethoden, die in unserem View-Vorlagencode verfügbar sind, um eine Vielzahl von allgemeinen Aufgaben wie diese auszuführen. Die Html.ActionLink()-Hilfsmethode ist besonders nützlich und erleichtert das Erstellen von HTML-Links <> und kümmert sich um lästige Details, z. B. um sicherzustellen, dass URL-Pfade ordnungsgemäß URL-codiert sind.

Html.ActionLink() verfügt über mehrere verschiedene Überladungen, um die Angabe so vieler Informationen zu ermöglichen, wie Sie für Ihre Links benötigen. Im einfachsten Fall geben Sie nur den Linktext und die Action-Methode an, zu der sie wechseln sollen, wenn auf den Link auf dem Client geklickt wird. Beispielsweise können wir die Index()-Methode "/Store/" auf der Seite "Store-Details" mit dem Linktext "Gehe zum Store-Index" mithilfe des folgenden Aufrufs verknüpfen:

@Html.ActionLink("Go
to the Store Index", "Index")

Hinweis: In diesem Fall mussten wir den Controllernamen nicht angeben, da wir nur eine Verknüpfung mit einer anderen Aktion innerhalb desselben Controllers herstellen, der die aktuelle Ansicht rendert.

Unsere Links zur Seite Durchsuchen müssen jedoch einen Parameter übergeben, sodass wir eine weitere Überladung der Html.ActionLink-Methode verwenden, die drei Parameter akzeptiert:

• 1. Linktext, der den Genrenamen anzeigt
• 2. Name der Controlleraktion (Durchsuchen)
• 3. Routenparameterwerte, die sowohl den Namen (Genre) als auch den Wert (Genrename) angeben

Wenn Sie dies alles zusammensetzen, schreiben wir diese Links in die Store Index-Ansicht:

<ul>
    @foreach (var genre in Model)
    {
        <li>@Html.ActionLink(genre.Name,
"Browse", new { genre = genre.Name })</li>
    }
</ul>

Wenn wir nun unser Projekt erneut ausführen und auf die /Store/-URL zugreifen, wird eine Liste der Genres angezeigt. Jedes Genre ist ein Link – wenn wir darauf geklickt haben, gelangen wir zur URL "/Store/Browse?genre=[genre]" .

Der HTML-Code für die Genreliste sieht wie folgt aus:

<ul>
    <li><a href="/Store/Browse?genre=Disco">Disco</a>
</li>
    <li><a href="/Store/Browse?genre=Jazz">Jazz</a>
</li>
    <li><a href="/Store/Browse?genre=Rock">Rock</a>
</li>
</ul>

ZurückWeiter