ASP.NET MVC 4 Fundamentals

Artikel
07/16/2024

This Hands-On Lab basiert auf MVC (Model View Controller) Music Store, einer Lernprogrammanwendung, die schrittweise erläutert, wie ASP.NET MVC und Visual Studio verwendet werden. In der gesamten Übung lernen Sie die Einfachheit kennen, doch können Sie diese Technologien gemeinsam nutzen. Sie beginnen mit einer einfachen Anwendung und erstellen sie, bis Sie über eine voll funktionsfähige ASP.NET MVC 4-Webanwendung verfügen.

Dieses Lab funktioniert mit ASP.NET MVC 4.

Wenn Sie die ASP.NET MVC 3-Version der Lernprogrammanwendung erkunden möchten, finden Sie sie im MVC-Music-Store.

In diesem hands-On Lab wird davon ausgegangen, dass der Entwickler Erfahrung in Webentwicklungstechnologien wie HTML und JavaScript hat.

Hinweis

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

Die Music Store-Anwendung

Die Music Store-Webanwendung, die in diesem Lab erstellt wird, besteht aus drei Hauptteilen: Einkaufen, Auschecken und Verwaltung. Besucher können Alben nach Genre durchsuchen, Alben zu ihrem Warenkorb hinzufügen, ihre Auswahl überprüfen und schließlich zum Auschecken fortfahren, um sich anzumelden und die Bestellung abzuschließen. Darüber hinaus können Store-Administratoren die verfügbaren Alben sowie ihre Haupteigenschaften verwalten.

Musikspeicherbildschirme

Musikspeicherbildschirme

ASP.NET MVC 4 Essentials

Die Music Store-Anwendung wird mit dem Modellansichtscontroller (Model View Controller, MVC) erstellt, einem Architekturmuster, das eine Anwendung in drei Hauptkomponenten trennt:

Modelle: Modellobjekte sind die Teile der Anwendung, die die Domänenlogik implementieren. Modellobjekte rufen häufig auch den Modellstatus in einer Datenbank ab und speichern sie.
Ansichten: Ansichten sind die Komponenten, die die Benutzeroberfläche der Anwendung anzeigen. In der Regel wird diese Benutzeroberfläche aus den Modelldaten erstellt. Ein Beispiel wäre die Bearbeitungsansicht von Alben, die Textfelder und eine Dropdownliste basierend auf dem aktuellen Zustand eines Album-Objekts anzeigt.
Controller: Controller sind die Komponenten, die benutzerinteraktion behandeln, das Modell bearbeiten und letztendlich eine Ansicht auswählen, um die Benutzeroberfläche zu rendern. In einer MVC-Anwendung zeigt die Ansicht nur Informationen an. Benutzereingaben und -interaktionen werden vom Controller verarbeitet und beantwortet.

Mit dem MVC-Muster können Sie Anwendungen erstellen, die die verschiedenen Aspekte der Anwendung (Eingabelogik, Geschäftslogik und UI-Logik) trennen und gleichzeitig eine lose Kopplung zwischen diesen Elementen bereitstellen. Diese Trennung hilft Ihnen, die Komplexität beim Erstellen einer Anwendung zu verwalten, da sie es Ihnen ermöglicht, sich gleichzeitig auf einen Aspekt der Implementierung zu konzentrieren. Darüber hinaus erleichtert das MVC-Muster das Testen von Anwendungen und fördert auch die Verwendung von testgesteuerter Entwicklung (TDD) zum Erstellen von Anwendungen.

Das ASP.NET MVC-Framework bietet eine Alternative zum ASP.NET Web Forms-Muster zum Erstellen ASP.NET MVC-basierten Webanwendungen. Das ASP.NET MVC-Framework ist ein einfaches, hoch testbares Präsentationsframework, das (wie bei webformularbasierten Anwendungen) in vorhandene ASP.NET-Features integriert ist, z. B. Gestaltungsvorlagen und mitgliedschaftsbasierte Authentifizierung, sodass Sie die gesamte Leistungsfähigkeit des kernigen .NET Frameworks erhalten. Dies ist nützlich, wenn Sie bereits mit ASP.NET Webformularen vertraut sind, da alle bibliotheken, die Sie bereits verwenden, auch in ASP.NET MVC 4 verfügbar sind.

Darüber hinaus fördert die lose Kopplung zwischen den drei Hauptkomponenten einer MVC-Anwendung auch die parallele Entwicklung. Beispielsweise kann ein Entwickler an der Ansicht arbeiten, ein zweiter Entwickler kann an der Controllerlogik arbeiten, und ein dritter Entwickler kann sich auf die Geschäftslogik im Modell konzentrieren.

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

Erstellen einer ASP.NET MVC-Anwendung von Grund auf basierend auf dem Lernprogramm "Music Store-Anwendung"
Hinzufügen von Controllern zum Verarbeiten von URLs zur Startseite der Website und zum Durchsuchen der Hauptfunktionen
Fügen Sie eine Ansicht hinzu, um den angezeigten Inhalt zusammen mit seiner Formatvorlage anzupassen.
Hinzufügen von Modellklassen zum Enthalten und Verwalten von Daten und Domänenlogik
Verwenden des Ansichtsmodellmusters zum Übergeben von Informationen von Controlleraktionen an die Ansichtsvorlagen
Entdecken Sie die neue Vorlage ASP.NET MVC 4 für Internetanwendungen

Voraussetzungen

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

Visual Studio 2012 Express for Web (Lesen Sie Anhang A , um Anweisungen zur Installation zu erhalten)

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 verwendet werden können, finden Sie in diesem Dokument den Anhang "Anhang C: Verwenden von Codeausschnitten".

Übungen

Dieses Hands-On Lab besteht aus den folgenden Übungen:

Übung 1: Erstellen von MusicStore ASP.NET MVC-Webanwendungsprojekt
Übung 2: Erstellen eines Controllers
Übung 3: Übergeben von Parametern an einen Controller
Übung 4: Erstellen einer Ansicht
Übung 5: Erstellen eines Ansichtsmodells
Übung 6: Verwenden von Parametern in Ansicht
Übung 7: Eine Runde um ASP.NET MVC 4 Neue Vorlage

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 dieser Übung: 60 Minuten.

Übung 1: Erstellen von MusicStore ASP.NET MVC-Webanwendungsprojekt

In dieser Übung erfahren Sie, wie Sie eine ASP.NET MVC-Anwendung in Visual Studio 2012 Express für Web sowie die Hauptordnerorganisation erstellen. Darüber hinaus erfahren Sie, wie Sie einen neuen Controller hinzufügen und eine einfache Zeichenfolge auf der Startseite der Anwendung anzeigen.

Aufgabe 1 : Erstellen des ASP.NET MVC-Webanwendungsprojekts

In dieser Aufgabe erstellen Sie ein leeres ASP.NET MVC-Anwendungsprojekt mithilfe der MVC Visual Studio-Vorlage. Starten Sie VS Express für Web.
Klicken Sie im Menü Datei auf Neues Projekt.
Wählen Sie im Dialogfeld "Neues Projekt " den ASP.NET MVC 4-Webanwendungsprojekttyp aus, der sich unter Visual C#, Webvorlagenliste befindet.
Ändern Sie den Namen in MvcMusicStore.
Legen Sie den Speicherort der Lösung in einem neuen Ordner "Begin " im Quellordner dieser Übung fest, z . B. [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Klicken Sie auf OK.

Dialogfeld "Neues Projekt erstellen"
Wählen Sie im Dialogfeld "Neues ASP.NET MVC 4-Projekt" die Standardvorlage aus, und stellen Sie sicher, dass das ausgewählte Ansichtsmodul Razor ist. Klicken Sie auf OK.

Neues ASP.NET MVC 4-Projektdialogfeld

Aufgabe 2 – Untersuchen der Lösungsstruktur

Das ASP.NET MVC-Framework enthält eine Visual Studio-Projektvorlage, mit der Sie Webanwendungen erstellen können, die das MVC-Muster unterstützen. Diese Vorlage erstellt eine neue ASP.NET MVC-Webanwendung mit den erforderlichen Ordnern, Elementvorlagen und Konfigurationsdateieinträgen.

In dieser Aufgabe untersuchen Sie die Lösungsstruktur, um die beteiligten Elemente und deren Beziehungen zu verstehen. Die folgenden Ordner sind in allen ASP.NET MVC-Anwendung enthalten, da das ASP.NET MVC-Framework standardmäßig einen Ansatz "Konvention über Konfiguration" verwendet und einige Standardannahmen basierend auf Ordnerbenennungskonventionen vorschreibt.

Überprüfen Sie nach dem Erstellen des Projekts die Ordnerstruktur, die im Projektmappen-Explorer auf der rechten Seite erstellt wurde:

ASP.NET MVC-Ordnerstruktur in Projektmappen-Explorer
1. Controller. Dieser Ordner enthält die Controllerklassen. In einer MVC-basierten Anwendung sind Controller für die Behandlung von Endbenutzerinteraktionen, das Bearbeiten des Modells und letztendlich die Auswahl einer Ansicht zum Rendern der Benutzeroberfläche verantwortlich.
  
  Hinweis
  
  Das MVC-Framework erfordert die Namen aller Controller, die mit "Controller" enden, z. B. HomeController, LoginController oder ProductController.
2. Modelle. Dieser Ordner wird für Klassen bereitgestellt, die das Anwendungsmodell für die MVC-Webanwendung darstellen. Dies umfasst in der Regel Code, der Objekte und die Logik für die Interaktion mit dem Datenspeicher definiert. In der Regel befinden sich die tatsächlichen Modellobjekte in separaten Klassenbibliotheken. Wenn Sie jedoch eine neue Anwendung erstellen, können Sie Klassen einschließen und diese dann zu einem späteren Zeitpunkt im Entwicklungszyklus in separate Klassenbibliotheken verschieben.
3. Ansichten. Dieser Ordner ist der empfohlene Speicherort für Ansichten, die für die Anzeige der Benutzeroberfläche der Anwendung verantwortlich sind. Ansichten verwenden .aspx-, ASCX-, CSHTML- und MASTER-Dateien sowie alle anderen Dateien, die sich auf das Rendern von Ansichten beziehen. Der Ordner "Ansichten" enthält einen Ordner für jeden Controller; der Ordner mit dem Präfix "Controllername" benannt wird. Wenn Sie beispielsweise über einen Controller mit dem Namen HomeController verfügen, enthält der Ordner "Ansichten" einen Ordner namens "Start". Wenn das ASP.NET MVC-Framework eine Ansicht lädt, wird standardmäßig nach einer .aspx Datei mit dem angeforderten Ansichtsnamen im Ordner "Views\controllerName" (Views[ControllerName][Action].aspx) oder (Views[ControllerName][Action].cshtml) für Razor-Ansichten gesucht.
  
  Hinweis
  
  Zusätzlich zu den zuvor aufgeführten Ordnern verwendet eine MVC-Webanwendung die Datei "Global.asax ", um globale URL-Routingstandardwerte festzulegen, und sie verwendet die Datei "Web.config ", um die Anwendung zu konfigurieren.

Aufgabe 3 – Hinzufügen eines HomeControllers

In ASP.NET Anwendungen, die das MVC-Framework nicht verwenden, wird die Benutzerinteraktion um Seiten organisiert und um das Auslösen und Behandeln von Ereignissen von diesen Seiten. Im Gegensatz dazu ist die Benutzerinteraktion mit ASP.NET MVC-Anwendungen um Controller und deren Aktionsmethoden angeordnet.

Andererseits ordnet ASP.NET MVC-Framework URLs Klassen zu, die als Controller bezeichnet werden. Controller verarbeiten eingehende Anforderungen, behandeln Benutzereingaben und -interaktionen, führen entsprechende Anwendungslogik aus und bestimmen die Antwort, die an den Client gesendet werden soll (Anzeige-HTML, Herunterladen einer Datei, Umleitung zu einer anderen URL usw.). Bei der Anzeige von HTML ruft eine Controllerklasse in der Regel eine separate Ansichtskomponente auf, um das HTML-Markup für die Anforderung zu generieren. In einer MVC-Anwendung zeigt die Ansicht nur Informationen an. Benutzereingaben und -interaktionen werden vom Controller verarbeitet und beantwortet.

In dieser Aufgabe fügen Sie eine Controllerklasse hinzu, die URLs auf der Startseite der Music Store-Website behandelt.

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Controller", wählen Sie "Hinzufügen" und dann "Controller"-Befehl aus:

Befehl "Controller hinzufügen"
Das Dialogfeld "Controller hinzufügen" wird angezeigt. Benennen Sie den Controller HomeController , und drücken Sie "Hinzufügen".

Dialogfeld "Controller hinzufügen"
Die Datei HomeController.cs wird im Ordner "Controller" erstellt. Damit der HomeController eine Zeichenfolge für die Indexaktion zurückgibt, ersetzen Sie die Index-Methode durch den folgenden Code:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex1 HomeController Index)
```
public string Index()
{
    return "Hello from Home";
}
```

Aufgabe 4 – Ausführen der Anwendung

In dieser Aufgabe testen Sie die Anwendung in einem Webbrowser.

Drücken Sie F5 , um die Anwendung auszuführen. Das Projekt wird kompiliert, und der lokale IIS-Webserver wird gestartet. Der lokale IIS-Webserver öffnet automatisch einen Webbrowser, der auf die URL des Webservers verweist.

Anwendung, die in einem Webbrowser ausgeführt wird

Hinweis

Der lokale IIS-Webserver führt die Website auf einer zufälligen kostenlosen Portnummer aus. In der obigen Abbildung wird die Website ausgeführt http://localhost:50103/, sodass sie Port 50103 verwendet. Ihre Portnummer kann variieren.
Schließen Sie den Browser.

Übung 2: Erstellen eines Controllers

In dieser Übung erfahren Sie, wie Sie den Controller aktualisieren, um einfache Funktionen der Music Store-Anwendung zu implementieren. Dieser Controller definiert Aktionsmethoden zur Behandlung der folgenden spezifischen Anforderungen:

Eine Eintragsseite der Musikgenres im Music Store
Eine Suchseite, auf der alle Musikalben für ein bestimmtes Genre aufgelistet sind
Eine Detailseite mit Informationen zu einem bestimmten Musikalbum

Für den Umfang dieser Übung geben diese Aktionen einfach eine Zeichenfolge zurück.

Aufgabe 1 : Hinzufügen einer neuen StoreController-Klasse

In dieser Aufgabe fügen Sie einen neuen Controller hinzu.

Wenn noch nicht geöffnet, starten Sie VS Express für Web 2012.
Wählen Sie im Menü "Datei " die Option "Projekt öffnen" aus. Navigieren Sie im Dialogfeld "Projekt öffnen" zu "Source\Ex02-CreatingAController\Begin", wählen Sie Begin.sln aus, und klicken Sie auf " Öffnen". Alternativ können Sie mit der Lösung fortfahren, die Sie nach Abschluss 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.
Fügen Sie den 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 "StoreController", und klicken Sie auf "Hinzufügen".

Dialogfeld "Controller hinzufügen"

Aufgabe 2 : Ändern der Aktionen des StoreControllers

In dieser Aufgabe ändern Sie die Controllermethoden, die als Aktionen bezeichnet werden. Aktionen sind für die Verarbeitung von URL-Anforderungen verantwortlich und bestimmen den Inhalt, der an den Browser oder Benutzer gesendet werden soll, der die URL aufgerufen hat.

Die StoreController-Klasse verfügt bereits über eine Index-Methode . Sie verwenden es später in dieser Übung, um die Seite zu implementieren, die alle Genres des Musikspeichers auflistet. Ersetzen Sie nun einfach die Index-Methode durch den folgenden Code, der eine Zeichenfolge "Hello from Store.Index()" zurückgibt:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex2 StoreController Index)
```
public string Index()
{
  return "Hello from Store.Index()";
}
```
Fügen Sie die Methoden "Browse" und "Details" hinzu. Fügen Sie hierzu dem StoreController den folgenden Code hinzu:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex2 StoreController BrowseAndDetails)
```
// GET: /Store/Browse
public string Browse()
{
  return "Hello from Store.Browse()";
}

// GET: /Store/Details  
public string Details()
{
  return "Hello from Store.Details()";
}
```

Aufgabe 3 – Ausführen der Anwendung

In dieser Aufgabe testen Sie die Anwendung in einem Webbrowser.

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL, um die Implementierung der einzelnen Aktionen zu überprüfen.
1. /Store. "Hello from Store.Index()" wird angezeigt.
2. /Store/Browse. "Hello from Store.Browse()" wird angezeigt.
3. /Store/Details. Sie sehen "Hello from Store.Details()".
  
  Browsen /Store/Browsen
Schließen Sie den Browser.

Übung 3: Übergeben von Parametern an einen Controller

Bisher haben Sie konstanten Zeichenfolgen von den Controllern zurückgegeben. In dieser Übung erfahren Sie, wie Sie Parameter mithilfe der URL und Abfragezeichenfolge an einen Controller übergeben und dann die Methodenaktionen mit Text auf den Browser reagieren.

Aufgabe 1 : Hinzufügen des Genreparameters zu StoreController

In dieser Aufgabe verwenden Sie die Abfragezeichenfolge , um Parameter an die Browse-Aktionsmethode im StoreController zu senden.

Wenn noch nicht geöffnet, starten Sie VS Express für Web.
Wählen Sie im Menü "Datei " die Option "Projekt öffnen" aus. Navigieren Sie im Dialogfeld "Projekt öffnen" zu "Source\Ex03-PassingParametersToAController\Begin", wählen Sie Begin.sln aus, und klicken Sie auf " Öffnen". Alternativ können Sie mit der Lösung fortfahren, die Sie nach Abschluss 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.
Öffnen Sie die StoreController-Klasse . Erweitern Sie dazu im Projektmappen-Explorer den Ordner "Controller", und doppelklicken Sie auf StoreController.cs.
Ändern Sie die Browse-Methode , und fügen Sie einen Zeichenfolgenparameter hinzu, um eine Anforderung für ein bestimmtes Genre anzufordern. ASP.NET MVC übergibt automatisch alle Abfragezeichenfolgen- oder Formularbeitragsparameter namens Genre an diese Aktionsmethode, wenn sie aufgerufen wird. Ersetzen Sie dazu die Browse-Methode durch den folgenden Code:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex3 StoreController BrowseMethod)
```
// GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}
```

Hinweis

Sie verwenden die Hilfsmethode HttpUtility.HtmlEncode , um zu verhindern, dass Benutzer Javascript in die Ansicht mit einem Link wie /Store/Browse einfügen? Genre=<script>window.location='http://hackersite.com'</script>.

Weitere Erläuterungen finden Sie in diesem Msdn-Artikel.

Aufgabe 2 – Ausführen der Anwendung

In dieser Aufgabe testen Sie die Anwendung in einem Webbrowser und verwenden den Genreparameter .

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL in "/Store/Browse"? Genre=Disco , um zu überprüfen, ob die Aktion den Genreparameter empfängt.

Browsen /Store/Browsen? Genre=Disco
Schließen Sie den Browser.

Aufgabe 3 – Hinzufügen eines in die URL eingebetteten ID-Parameters

In dieser Aufgabe verwenden Sie die URL , um einen ID-Parameter an die Details-Aktionsmethode des StoreControllers zu übergeben. ASP.NET die Standardroutingkonvention von MVC besteht darin, das Segment einer URL nach dem Aktionsmethodennamen als Parameter namens ID zu behandeln. Wenn die Aktionsmethode den Parameter "ID" hat, wird ASP.NET MVC automatisch das URL-Segment als Parameter an Sie übergeben. Im URL Store/Details/5 wird die ID als 5 interpretiert.

Ändern Sie die Details-Methode des StoreControllers, und fügen Sie einen int-Parameter namens "ID" hinzu. Ersetzen Sie dazu die Details-Methode durch den folgenden Code:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex3 StoreController DetailsMethod)
```
// GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}
```

Aufgabe 4 – Ausführen der Anwendung

In dieser Aufgabe testen Sie die Anwendung in einem Webbrowser und verwenden den Id-Parameter .

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL in "/Store/Details/5 ", um zu überprüfen, ob die Aktion den ID-Parameter empfängt.

Browsen /Store/Details/5

Übung 4: Erstellen einer Ansicht

Bisher haben Sie Zeichenfolgen aus Controlleraktionen zurückgegeben. Obwohl dies eine nützliche Möglichkeit ist, zu verstehen, wie Controller funktionieren, ist es nicht, wie Ihre echten Webanwendungen erstellt werden. Ansichten sind Komponenten, die einen besseren Ansatz zum Generieren von HTML im Browser mit der Verwendung von Vorlagendateien bieten.

In dieser Übung erfahren Sie, wie Sie eine Layoutgestaltungsvorlage hinzufügen, um eine Vorlage für allgemeine HTML-Inhalte einzurichten, ein StyleSheet, um das Aussehen und Verhalten der Website zu verbessern und schließlich eine Ansichtsvorlage, mit der HomeController HTML zurückgeben kann.

Aufgabe 1 : Ändern der Datei _layout.cshtml

Mit der Datei ~/Views/Shared/_layout.cshtml können Sie eine Vorlage für allgemeine HTML-Code einrichten, die für die gesamte Website verwendet werden kann. In dieser Aufgabe fügen Sie eine Layoutgestaltungsvorlage mit einer allgemeinen Kopfzeile mit Links zur Startseite und dem Store-Bereich hinzu.

Wenn noch nicht geöffnet, starten Sie VS Express für Web.
Wählen Sie im Menü "Datei " die Option "Projekt öffnen" aus. Navigieren Sie im Dialogfeld "Projekt öffnen" zu "Source\Ex04-CreatingAView\Begin", wählen Sie Begin.sln aus, und klicken Sie auf " Öffnen". Alternativ können Sie mit der Lösung fortfahren, die Sie nach Abschluss 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.

Die Datei _layout.cshtml enthält das HTML-Containerlayout für alle Seiten auf der Website. Es enthält das HTML-Element für die HTML-Antwort> sowie die< Kopf>- und <Textkörperelemente>.< @RenderBody() innerhalb des HTML-Textkörpers identifizieren Bereiche, in denen Ansichtsvorlagen mit dynamischem Inhalt ausgefüllt werden können. (C#)

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

Fügen Sie eine allgemeine Kopfzeile mit Links zur Startseite und dem Store-Bereich auf allen Seiten der Website hinzu. Fügen Sie hierzu den folgenden Code unterhalb <der Body-Anweisung> hinzu. (C#)

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

Fügen Sie ein div-Element ein, um den Textabschnitt jeder Seite zu rendern. Ersetzen Sie @RenderBody() durch den folgenden hervorgehobenen Code: (C#)

...
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     <div id="body">
          @RenderSection("featured", required: false)
          <section class="content-wrapper main-content clear-fix">
                @RenderBody()
          </section>
     </div>
     ...
</body>
</html>

Hinweis

Schon gewusst? Visual Studio 2012 verfügt über Codeausschnitte, die das Hinzufügen häufig verwendeter Code in HTML, Codedateien und mehr erleichtern. Probieren Sie es aus<, indem Sie div> eingeben und zweimal DIE TAB-TASTE drücken, um ein vollständiges div-Tag einzufügen.

Aufgabe 2 – Hinzufügen von CSS-Stylesheets

Die leere Projektvorlage enthält eine sehr optimierte CSS-Datei, die nur Formatvorlagen enthält, die zum Anzeigen grundlegender Formulare und Validierungsmeldungen verwendet werden. Sie verwenden zusätzliche CSS und Bilder (möglicherweise von einem Designer bereitgestellt), um das Aussehen und Verhalten der Website zu verbessern.

In dieser Aufgabe fügen Sie ein CSS-Stylesheet hinzu, um die Formatvorlagen der Website zu definieren.

Die CSS-Datei und -Bilder sind im Ordner "Source\Assets\Content " dieser Übung enthalten. Um sie der Anwendung hinzuzufügen, ziehen Sie deren Inhalt aus einem Windows Explorer-Fenster in die Projektmappen-Explorer in Visual Studio Express für Web, wie unten gezeigt:

Formatvorlageninhalt ziehen
Es wird ein Warndialogfeld angezeigt, in dem sie zur Bestätigung aufgefordert wird, Site.css Datei und einige vorhandene Bilder zu ersetzen. Aktivieren Sie "Auf alle Elemente anwenden", und klicken Sie auf " Ja".

Aufgabe 3 – Hinzufügen einer Ansichtsvorlage

In dieser Aufgabe fügen Sie eine Ansichtsvorlage hinzu, um die HTML-Antwort zu generieren, die die Layoutgestaltungsvorlage und CSS verwendet, die in dieser Übung hinzugefügt wird.

Wenn Sie beim Durchsuchen der Startseite der Website eine Ansichtsvorlage verwenden möchten, müssen Sie zuerst angeben, dass die HomeController Index-Methode eine Ansicht zurückgibt, anstatt eine Zeichenfolge zurückzugeben. Öffnen Sie die HomeController-Klasse, und ändern Sie die Index-Methode, um ein ActionResult zurückzugeben, und geben Sie View()zurück.

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex4 HomeController Index)
```
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}
```
Jetzt müssen Sie eine entsprechende Ansichtsvorlage hinzufügen. Klicken Sie dazu mit der rechten Maustaste in die Index-Aktionsmethode, und wählen Sie "Ansicht hinzufügen" aus. Dadurch wird das Dialogfeld "Ansicht hinzufügen" angezeigt.

Hinzufügen einer Ansicht aus der Index-Methode
Das Dialogfeld "Ansicht hinzufügen" wird angezeigt, um eine Ansichtsvorlagendatei zu generieren. Standardmäßig füllt dieses Dialogfeld den Namen der Ansichtsvorlage vor, sodass es mit der Aktionsmethode übereinstimmt, die sie verwendet. Da Sie das Kontextmenü "Ansicht hinzufügen" in der Index-Aktionsmethode innerhalb der HomeController verwendet haben, weist das Dialogfeld "Ansicht hinzufügen" den Namen "Index" als Standardansichtsnamen auf. Klicken Sie auf Hinzufügen.

Dialogfeld "Ansicht hinzufügen"
Visual Studio generiert eine Index.cshtml-Ansichtsvorlage im Ordner "Views\Home " und öffnet sie dann.

Erstellte Startindexansicht

Hinweis

Name und Speicherort der Datei Index.cshtml sind relevant und folgen den Standard-ASP.NET MVC-Benennungskonventionen.

Der Ordner \Views*Home* entspricht dem Controllernamen (Home Controller). Der Name der Ansichtsvorlage (Index) entspricht der Controlleraktionsmethode, die die Ansicht anzeigt.

Auf diese Weise vermeiden ASP.NET MVC, den Namen oder speicherort einer Ansichtsvorlage explizit anzugeben, wenn diese Benennungskonvention verwendet wird, um eine Ansicht zurückzugeben.
Die generierte Ansichtsvorlage basiert auf der zuvor definierten _layout.cshtml-Vorlage . Aktualisieren Sie die ViewBag.Title-Eigenschaft auf " Start", und ändern Sie den Hauptinhalt in "Dies ist die Startseite", wie im folgenden Code gezeigt:
```
@{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>
```
Wählen Sie im Projektmappen-Explorer MvcMusicStore-Projekt aus, und drücken Sie F5, um die Anwendung auszuführen.

Aufgabe 4: Überprüfung

Um zu überprüfen, ob Sie alle Schritte in der vorherigen Übung ordnungsgemäß ausgeführt haben, gehen Sie wie folgt vor:

Wenn die Anwendung in einem Browser geöffnet wurde, sollten Sie Folgendes beachten:

Die Index-Aktionsmethode von HomeController hat die Vorlage \Views\Home\Index.cshtml View gefunden und angezeigt, obwohl der Code "View()" aufgerufen hat, da die Ansichtsvorlage auf die Standardbenennungskonvention folgte.
Auf der Startseite wird die Willkommensnachricht angezeigt, die in der Ansichtsvorlage \Views\Home\Index.cshtml definiert ist.
Die Startseite verwendet die Vorlage "_layout.cshtml ", sodass die Willkommensnachricht im standardmäßigen HTML-Layout der Website enthalten ist.

Startindexansicht mit der definierten LayoutPage und -Formatvorlage

Übung 5: Erstellen eines Ansichtsmodells

Bisher haben Sie Ihre Ansichten hartcodierten HTML-Code angezeigt, aber um dynamische Webanwendungen zu erstellen, sollte die Ansichtsvorlage Informationen vom Controller erhalten. Eine gängige Technik, die für diesen Zweck verwendet werden soll, ist das ViewModel-Muster , mit dem ein Controller alle informationen packen kann, die zum Generieren der entsprechenden HTML-Antwort erforderlich sind.

In dieser Übung erfahren Sie, wie Sie eine ViewModel-Klasse erstellen und die erforderlichen Eigenschaften hinzufügen: die Anzahl der Genres im Speicher und eine Liste dieser Genres. Außerdem aktualisieren Sie den StoreController so, dass es das erstellte ViewModel verwendet, und schließlich erstellen Sie eine neue Ansichtsvorlage, die die erwähnten Eigenschaften auf der Seite anzeigt.

Aufgabe 1 – Erstellen einer ViewModel-Klasse

In dieser Aufgabe erstellen Sie eine ViewModel-Klasse, die das Store-Genreeintragsszenario implementiert.

Wenn noch nicht geöffnet, starten Sie VS Express für Web.
Wählen Sie im Menü "Datei " die Option "Projekt öffnen" aus. Navigieren Sie im Dialogfeld "Projekt öffnen" zu "Source\Ex05-CreatingAViewModel\Begin", wählen Sie Begin.sln aus, und klicken Sie auf " Öffnen". Alternativ können Sie mit der Lösung fortfahren, die Sie nach Abschluss 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.
Erstellen Sie einen ViewModels-Ordner , um das ViewModel zu speichern. Klicken Sie dazu mit der rechten Maustaste auf das MvcMusicStore-Projekt der obersten Ebene, wählen Sie "Hinzufügen" und dann "Neuer Ordner" aus.

Hinzufügen eines neuen Ordners
Benennen Sie den Ordner ViewModels.

ViewModels-Ordner in Projektmappen-Explorer
Erstellen Sie eine ViewModel-Klasse . Klicken Sie dazu mit der rechten Maustaste auf den zuletzt erstellten ViewModels-Ordner , wählen Sie "Hinzufügen " und dann " Neues Element" aus. Wählen Sie unter "Code" das Klassenelement aus, und benennen Sie die Datei StoreIndexViewModel.cs, und klicken Sie dann auf "Hinzufügen".

Hinzufügen einer neuen Klasse

Erstellen der StoreIndexViewModel-Klasse

Aufgabe 2 : Hinzufügen von Eigenschaften zur ViewModel-Klasse

Es gibt zwei Parameter, die vom StoreController an die Ansichtsvorlage übergeben werden sollen, um die erwartete HTML-Antwort zu generieren: die Anzahl der Genres im Store und eine Liste dieser Genres.

In dieser Aufgabe fügen Sie diese 2 Eigenschaften zur StoreIndexViewModel-Klasse hinzu: NumberOfGenres (eine ganze Zahl) und Genres (eine Liste von Zeichenfolgen).

Fügen Sie der StoreIndexViewModel-Klasse NumberOfGenres und Genres-Eigenschaften hinzu. Fügen Sie dazu der Klassendefinition die folgenden 2 Zeilen hinzu:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex5 StoreIndexViewModel-Eigenschaften)
```
public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}
```

Hinweis

Die {get; set; } Notation verwendet das Feature für automatisch implementierte Eigenschaften von C#. Sie bietet die Vorteile einer Eigenschaft, ohne dass wir ein Sicherungsfeld deklarieren müssen.

Aufgabe 3 : Aktualisieren des StoreControllers für die Verwendung des StoreIndexViewModel

Die StoreIndexViewModel-Klasse kapselt die informationen, die zum Übergeben von der Index-Methode von StoreController an eine View-Vorlage erforderlich sind, um eine Antwort zu generieren.

In dieser Aufgabe aktualisieren Sie den StoreController so, dass es das StoreIndexViewModel verwendet.

Öffnen Sie die StoreController-Klasse .

Öffnen der StoreController-Klasse
Um die StoreIndexViewModel-Klasse aus dem StoreController zu verwenden, fügen Sie oben im StoreController-Code den folgenden Namespace hinzu:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex5 StoreIndexViewModel using ViewModels)
```
using MvcMusicStore.ViewModels;
```
Ändern Sie die Index-Aktionsmethode des StoreController so, dass sie ein StoreIndexViewModel-Objekt erstellt und auffüllt und dann an eine Ansichtsvorlage übergibt, um eine HTML-Antwort mit ihr zu generieren.

Hinweis

In lab "ASP.NET MVC Models and Data Access" schreiben Sie Code, der die Liste der Speichergenres aus einer Datenbank abruft. Im folgenden Code erstellen Sie eine Liste der Dummy-Datengenres, die das StoreIndexViewModel auffüllen.

Nach dem Erstellen und Einrichten des StoreIndexViewModel-Objekts wird es als Argument an die View-Methode übergeben. Dies gibt an, dass die Ansichtsvorlage dieses Objekt verwendet, um eine HTML-Antwort mit ihr zu generieren.

Ersetzen Sie die Index-Methode durch den folgenden Code:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex5 StoreController Index-Methode)

public ActionResult Index()
{
    // Create a list of genres
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};

    // Create our view model
    var viewModel = new StoreIndexViewModel { 
        NumberOfGenres = genres.Count(),
        Genres = genres
    };

    return this.View(viewModel);
}

Hinweis

Wenn Sie mit C# nicht vertraut sind, gehen Sie möglicherweise davon aus, dass die Variable "viewModel" spät gebunden ist. Das ist nicht richtig . Der C#-Compiler verwendet typinference basierend auf dem, was Sie der Variablen zuweisen, um zu bestimmen, dass viewModel vom Typ StoreIndexViewModel ist. Außerdem erhalten Sie durch Kompilieren der lokalen ViewModel-Variable als StoreIndexViewModel-Typ kompiliert die Kompilierungszeitüberprüfung und die Unterstützung des Visual Studio-Code-Editors.

Aufgabe 4 – Erstellen einer Ansichtsvorlage, die StoreIndexViewModel verwendet

In dieser Aufgabe erstellen Sie eine Ansichtsvorlage, die ein vom Controller übergebenes StoreIndexViewModel-Objekt verwendet, um eine Liste der Genres anzuzeigen.

Bevor Sie die neue Ansichtsvorlage erstellen, erstellen wir das Projekt, damit das Dialogfeld "Ansicht hinzufügen" die StoreIndexViewModel-Klasse kennt. Erstellen Sie das Projekt, indem Sie das Menüelement "Erstellen " und dann " MvcMusicStore erstellen" auswählen.

Erstellen des Projekts
Erstellen Sie eine neue Ansichtsvorlage. Klicken Sie dazu mit der rechten Maustaste in die Index-Methode, und wählen Sie "Ansicht hinzufügen" aus.

Hinzufügen einer Ansicht
Da das Dialogfeld "Ansicht hinzufügen" vom StoreController aufgerufen wurde, wird die Ansichtsvorlage standardmäßig in einer Datei "\Views\Store\Index.cshtml " hinzugefügt. Aktivieren Sie das Kontrollkästchen "Stark typisch eingegebene Ansicht erstellen", und wählen Sie dann "StoreIndexViewModel " als Modellklasse aus. Stellen Sie außerdem sicher, dass das ausgewählte Ansichtsmodul Razor ist. Klicken Sie auf Hinzufügen.

Dialogfeld "Ansicht hinzufügen"

Die Vorlagendatei \Views\Store\Index.cshtml View wird erstellt und geöffnet. Basierend auf den Informationen, die im Dialogfeld "Ansicht hinzufügen" im letzten Schritt bereitgestellt werden, erwartet die Ansichtsvorlage eine StoreIndexViewModel-Instanz als die Daten, die zum Generieren einer HTML-Antwort verwendet werden sollen. Sie werden feststellen, dass die Vorlage eine ViewPage<musicstore.viewmodels.storeindexviewmodel> in C# erbt.

Aufgabe 5 – Aktualisieren der Ansichtsvorlage

In dieser Aufgabe aktualisieren Sie die Ansichtsvorlage, die in der letzten Aufgabe erstellt wurde, um die Anzahl der Genres und deren Namen auf der Seite abzurufen.

Hinweis

Sie verwenden die @-Syntax (häufig als "Code nuggets" bezeichnet), um Code in der Ansichtsvorlage auszuführen.

Ersetzen Sie in der Datei Index.cshtml im Ordner "Store" den Code durch Folgendes:

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

Durchlaufen Sie die Genreliste in StoreIndexViewModel, und erstellen Sie eine HTML-Ul-Liste>< mit einer Foreach-Schleife. (C#)

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>

Drücken Sie F5, um die Anwendung auszuführen und /Store zu durchsuchen. Die Liste der Genres, die im StoreIndexViewModel-Objekt vom StoreController an die Ansichtsvorlage übergeben werden, wird angezeigt.

Anzeigen einer Liste von Genres

Anzeigen einer Liste von Genres

Schließen Sie den Browser.

Übung 6: Verwenden von Parametern in der Ansicht

In Übung 3 haben Sie gelernt, wie Sie Parameter an den Controller übergeben. In dieser Übung erfahren Sie, wie Sie diese Parameter in der Ansichtsvorlage verwenden. Zu diesem Zweck werden Sie zuerst mit Model-Klassen eingeführt, die Ihnen helfen, Ihre Daten und Domänenlogik zu verwalten. Darüber hinaus erfahren Sie, wie Sie Links zu Seiten innerhalb der ASP.NET MVC-Anwendung erstellen, ohne sich Gedanken über Dinge wie die Codierung von URL-Pfaden machen zu müssen.

Aufgabe 1 – Hinzufügen von Modellklassen

Im Gegensatz zu ViewModels, die nur zum Übergeben von Informationen vom Controller an die Ansicht erstellt werden, werden Modellklassen erstellt, um Daten und Domänenlogik zu enthalten und zu verwalten. In dieser Aufgabe fügen Sie zwei Modellklassen hinzu, um diese Konzepte darzustellen: Genre und Album.

Wenn noch nicht geöffnet, starten Sie VS Express für Web
Wählen Sie im Menü "Datei " die Option "Projekt öffnen" aus. Navigieren Sie im Dialogfeld "Projekt öffnen" zu "Source\Ex06-UsingParametersInView\Begin", wählen Sie Begin.sln aus, und klicken Sie auf " Öffnen". Alternativ können Sie mit der Lösung fortfahren, die Sie nach Abschluss 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.
Fügen Sie eine Genremodellklasse hinzu. Klicken Sie dazu im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Modelle", wählen Sie "Hinzufügen" und dann die Option "Neues Element" aus. Wählen Sie unter "Code" das Klassenelement aus, und nennen Sie die Datei Genre.cs, und klicken Sie dann auf "Hinzufügen".

Hinzufügen eines neuen Elements

Hinzufügen der Genremodellklasse

Fügen Sie der Genre-Klasse eine Name-Eigenschaft hinzu. Fügen Sie hierzu den folgenden Code hinzu:

(Codeausschnitt - ASP.NET MVC 4 Grundlagen - Ex6 Genre)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

Fügen Sie nach demselben Verfahren wie zuvor eine Albumklasse hinzu. Klicken Sie dazu im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Modelle", wählen Sie "Hinzufügen" und dann die Option "Neues Element" aus. Wählen Sie unter "Code" das Klassenelement aus, und benennen Sie die Datei Album.cs, und klicken Sie dann auf "Hinzufügen".

Fügen Sie der Albumklasse zwei Eigenschaften hinzu: Genre und Title. Fügen Sie hierzu den folgenden Code hinzu:

(Codeausschnitt - ASP.NET MVC 4 Grundlagen - Ex6 Album)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Album
    {
        public string Title { get; set; }

        public Genre Genre { get; set; }
    }
}

Aufgabe 2 : Hinzufügen eines StoreBrowseViewModel

In dieser Aufgabe wird ein StoreBrowseViewModel verwendet, um die Alben anzuzeigen, die einem ausgewählten Genre entsprechen. In dieser Aufgabe erstellen Sie diese Klasse und fügen dann zwei Eigenschaften zum Behandeln des Genres und der zugehörigen Albumliste hinzu.

Fügen Sie eine StoreBrowseViewModel-Klasse hinzu. Klicken Sie hierzu im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "ViewModels", wählen Sie "Hinzufügen" und dann die Option "Neues Element" aus. Wählen Sie unter "Code" das Klassenelement aus, und nennen Sie die Datei StoreBrowseViewModel.cs, und klicken Sie dann auf "Hinzufügen".

Fügen Sie einen Verweis auf die Models in der StoreBrowseViewModel-Klasse hinzu. Fügen Sie dazu den folgenden Namespace hinzu:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex6 UsingModel)

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

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

Fügen Sie der StoreBrowseViewModel-Klasse zwei Eigenschaften hinzu: Genre und Alben. Fügen Sie hierzu den folgenden Code hinzu:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex6 ModelProperties)

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

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
        public Genre Genre { get; set; }

        public List<Album> Albums { get; set; }
    }
}

Hinweis

Was ist Listenalbum>< ?: Diese Definition verwendet den Listen-T-Typ<>, wobei T den Typ, zu dem die Elemente dieser Liste gehören, in diesem Fall Album (oder eines seiner Nachfolger) einschränkt.

Diese Möglichkeit zum Entwerfen von Klassen und Methoden, die die Spezifikation eines oder mehrerer Typen zurückstellen, bis die Klasse oder Methode vom Clientcode deklariert und instanziiert wird, ist ein Feature der C#-Sprache namens "Generics".

List<T> ist das generische Äquivalent des ArrayList-Typs und ist im System.Collections.Generic-Namespace verfügbar. Einer der Vorteile der Verwendung von Generika besteht darin, dass Sie, da der Typ angegeben ist, keine Typenüberprüfungsvorgänge durchführen müssen, z. B. das Umwandeln der Elemente in "Album " wie bei einer ArrayList.

Aufgabe 3 – Verwenden des neuen ViewModels im StoreController

In dieser Aufgabe ändern Sie die Aktionsmethoden "Durchsuchen" und "Details" des StoreControllers, um das neue StoreBrowseViewModel zu verwenden.

Fügen Sie einen Verweis auf den Ordner "Models" in der StoreController-Klasse hinzu. Erweitern Sie dazu den Ordner "Controller" im Projektmappen-Explorer, und öffnen Sie die StoreController-Klasse. Fügen Sie dann den folgenden Code hinzu:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex6 UsingModelInController)
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;
```

Ersetzen Sie die Browse-Aktionsmethode , um die StoreViewBrowseController-Klasse zu verwenden. Sie erstellen ein Genre- und zwei neue Albumobjekte mit Dummy-Daten (im nächsten Hands-on Lab verwenden Sie echte Daten aus einer Datenbank). Ersetzen Sie dazu die Browse-Methode durch den folgenden Code:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex6 BrowseMethod)

//
// GET: /Store/Browse?genre=Disco

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

    var albums = new List<Album>()
    {
        new Album() { Title = genre + " Album 1" },
        new Album() { Title = genre + " Album 2" }
    };

    var viewModel = new StoreBrowseViewModel()
    {
        Genre = genreModel,
        Albums = albums
    };

    return this.View(viewModel);
}

Ersetzen Sie die Details-Aktionsmethode , um die StoreViewBrowseController-Klasse zu verwenden. Sie erstellen ein neues Album-Objekt , das an die Ansicht zurückgegeben werden soll. Ersetzen Sie dazu die Details-Methode durch den folgenden Code:

(Codeausschnitt - ASP.NET MVC 4 Fundamentals - Ex6 DetailsMethod)
```
//
// GET: /Store/Details/5

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

  return this.View(album);
}
```

Aufgabe 4 – Hinzufügen einer Ansichtsvorlage "Durchsuchen"

In dieser Aufgabe fügen Sie eine Suchansicht hinzu, um die Alben anzuzeigen, die für ein bestimmtes Genre gefunden wurden.

Bevor Sie die neue Ansichtsvorlage erstellen, sollten Sie das Projekt erstellen, damit das Dialogfeld "Ansicht hinzufügen" die zu verwendende ViewModel-Klasse kennt. Erstellen Sie das Projekt, indem Sie das Menüelement "Erstellen " und dann " MvcMusicStore erstellen" auswählen.
Fügen Sie eine Suchansicht hinzu. Klicken Sie hierzu mit der rechten Maustaste in die Browse-Aktionsmethode des StoreControllers , und klicken Sie auf " Ansicht hinzufügen".
Überprüfen Sie im Dialogfeld "Ansicht hinzufügen", ob der Ansichtsname "Durchsuchen" lautet. Aktivieren Sie das Kontrollkästchen "Stark typisch eingegebene Ansicht erstellen", und wählen Sie "StoreBrowseViewModel " aus der Dropdownliste " Modellklasse " aus. Belassen Sie die anderen Felder mit ihrem Standardwert. Klicken Sie anschließend auf Hinzufügen.

Hinzufügen einer Suchansicht

Ändern Sie " Browse.cshtml ", um die Informationen des Genres anzuzeigen, und greifen Sie auf das StoreBrowseViewModel-Objekt zu, das an die Ansichtsvorlage übergeben wird. Ersetzen Sie dazu den Inhalt durch Folgendes: (C#)

@model MvcMusicStore.ViewModels.StoreBrowseViewModel

@{
    ViewBag.Title = "Browse Albums";
}

<h2>Browsing Genre: @Model.Genre.Name</h2>

<ul>
    @foreach (var album in Model.Albums)
    {
        <li>@album.Title</li>
    }
</ul>

Aufgabe 5 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, ob die Browse-Methode Alben aus der Browse-Methodenaktion abruft.

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL in "/Store/Browse"? Genre=Disco , um zu überprüfen, ob die Aktion zwei Alben zurückgibt.

Browsen Store Disco Alben

Aufgabe 6 – Anzeigen von Informationen zu einem bestimmten Album

In dieser Aufgabe implementieren Sie die Ansicht "Store/Details ", um Informationen zu einem bestimmten Album anzuzeigen. In dieser praktischen Übung ist alles, was Sie über das Album anzeigen, bereits in der Ansichtsvorlage enthalten. Anstatt also eine StoreDetailsViewModel-Klasse zu erstellen, verwenden Sie die aktuelle StoreBrowseViewModel-Vorlage , die das Album an sie übergibt.

Schließen Sie den Browser bei Bedarf, um zum Visual Studio-Fenster zurückzukehren. Fügen Sie eine neue Detailansicht für die Aktionsmethode "Details" des StoreControllers hinzu. Klicken Sie hierzu mit der rechten Maustaste auf die Detailmethode in der StoreController-Klasse , und klicken Sie dann auf " Ansicht hinzufügen".
Überprüfen Sie im Dialogfeld "Ansicht hinzufügen", ob der Ansichtsname "Details" lautet. Aktivieren Sie das Kontrollkästchen "Stark eingegebene Ansicht erstellen", und wählen Sie "Album " aus der Dropdownliste " Modellklasse " aus. Belassen Sie die anderen Felder mit ihrem Standardwert. Klicken Sie anschließend auf Hinzufügen. Dadurch wird eine Datei \Views\Store\Details.cshtml erstellt und geöffnet.

Hinzufügen einer Detailansicht
Ändern Sie die Datei "Details.cshtml ", um die Informationen des Albums anzuzeigen, und greifen Sie auf das Albumobjekt zu, das an die Ansichtsvorlage übergeben wird. Ersetzen Sie dazu den Inhalt durch Folgendes: (C#)
```
@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

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

Aufgabe 7 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, ob die Detailansicht die Informationen des Albums aus der Aktion "Details" abruft.

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL in "/Store/Details/5 ", um die Informationen des Albums zu überprüfen.

Detail des Browseralbums

Aufgabe 8 – Hinzufügen von Verknüpfungen zwischen Seiten

In dieser Aufgabe fügen Sie einen Link in der Store-Ansicht hinzu, um einen Link in jedem Genrenamen zu der entsprechenden /Store/Browse-URL zu erhalten. Auf diese Weise, wenn Sie auf ein Genre klicken, z . B. Disco, navigiert er zu /Store/Browse?genre=Disco-URL .

Schließen Sie den Browser bei Bedarf, um zum Visual Studio-Fenster zurückzukehren. Aktualisieren Sie die Indexseite , um der Seite " Durchsuchen" einen Link hinzuzufügen. Erweitern Sie dazu im Projektmappen-Explorer den Ordner "Ansichten" und dann den Ordner "Store", und doppelklicken Sie auf die Seite "Index.cshtml".
Fügen Sie der Ansicht "Durchsuchen" einen Link hinzu, der das ausgewählte Genre angibt. Ersetzen Sie dazu den folgenden hervorgehobenen Code innerhalb der <Li-Tags> : (C#)
```
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p> Select from @Model.NumberOfGenres genres</p>

<ul>
    @foreach (string genreName in Model.Genres) {
        <li>
            @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
        </li>
        }
</ul>
```
Hinweis

Ein anderer Ansatz wäre eine direkte Verknüpfung mit der Seite, mit einem Code wie dem folgenden:

<a href="/Store/Browse?genre=@genreName">@genreName</a>

Obwohl dieser Ansatz funktioniert, hängt es von einer hartcodierten Zeichenfolge ab. Wenn Sie den Controller später umbenennen, müssen Sie diese Anweisung manuell ändern. Eine bessere Alternative ist die Verwendung einer HTML-Hilfsmethode . ASP.NET MVC enthält eine HTML-Hilfsmethode, die für solche Aufgaben verfügbar ist. Die Html.ActionLink() -Hilfsmethode erleichtert das Erstellen von HTML-Code <für> Links und stellt sicher, dass URL-Pfade ordnungsgemäß URL-codiert sind.

Html.ActionLink verfügt über mehrere Überladungen. In dieser Übung verwenden Sie einen Parameter, der drei Parameter verwendet:
1. Linktext, der den Genrenamen anzeigt
2. Controlleraktionsname (Durchsuchen)
3. Route-Parameterwerte, die sowohl den Namen (Genre) als auch den Wert (Genrename) angeben

Aufgabe 9 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass jedes Genre mit einem Link zur entsprechenden /Store/Browse-URL angezeigt wird.

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL in "/Store ", um zu überprüfen, ob die einzelnen Genres mit der entsprechenden /Store/Browse-URL verknüpft sind.

Browsergenres mit Links zur Seite "Durchsuchen"

Aufgabe 10 – Verwenden der dynamischen ViewModel-Auflistung zum Übergeben von Werten

In dieser Aufgabe lernen Sie eine einfache und leistungsstarke Methode zum Übergeben von Werten zwischen dem Controller und der Ansicht, ohne Änderungen am Modell vorzunehmen. ASP.NET MVC 4 stellt die Sammlung "ViewModel" bereit, die jedem dynamischen Wert zugewiesen und auch innerhalb von Controllern und Ansichten aufgerufen werden kann.

Sie verwenden nun die dynamische ViewBag-Sammlung, um eine Liste der "Starred Genres" vom Controller an die Ansicht zu übergeben. Die Store-Indexansicht greift auf ViewModel zu und zeigt die Informationen an.

Schließen Sie den Browser bei Bedarf, um zum Visual Studio-Fenster zurückzukehren. Öffnen Sie StoreController.cs , und ändern Sie die Index-Methode , um eine Liste von Sternengenres in der ViewModel-Auflistung zu erstellen:

public ActionResult Index()
{
    // Create list of genres
    var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };

    // Create your view model
    var viewModel = new StoreIndexViewModel
    {
        NumberOfGenres = genres.Count,
        Genres = genres
    };

    ViewBag.Starred = new List<string> { "Rock", "Jazz" };

    return this.View(viewModel);
}

Hinweis

Sie können auch die Syntax ViewBag["Starred"] verwenden, um auf die Eigenschaften zuzugreifen.

Das Sternsymbol "starred.png" ist im Ordner "Source\Assets\Images" dieses Labors enthalten. Um sie der Anwendung hinzuzufügen, ziehen Sie deren Inhalt aus einem Windows Explorer-Fenster in die Projektmappen-Explorer in Visual Web Developer Express, wie unten dargestellt:

Hinzufügen eines Sternbilds zur Lösung

Öffnen Sie den Ansichtsspeicher /Index.cshtml , und ändern Sie den Inhalt. Sie lesen die Eigenschaft "sterned" in der ViewBag-Auflistung und fragen, ob sich der aktuelle Genrename in der Liste befindet. In diesem Fall zeigen Sie ein Sternsymbol rechts auf den Genrelink an. (C#)

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
     ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
     @foreach (string genreName in Model.Genres)
     {
          <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)

                @if (ViewBag.Starred.Contains(genreName))
                { 
                     <img src="../../Content/Images/starred.png" alt="Starred element" />
                }
          </li>
     }
</ul>
<br />
<h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>

Aufgabe 11 – Ausführen der Anwendung

In dieser Aufgabe testen Sie, dass die Sterngenres ein Sternsymbol anzeigen.

Drücken Sie F5 , um die Anwendung auszuführen.
Das Projekt beginnt auf der Startseite. Ändern Sie die URL in "/Store ", um zu überprüfen, ob jedes ausgewählte Genre über die entsprechende Bezeichnung verfügt:

Browsen von Genres mit Sternelementen

Übung 7: Eine Runde um ASP.NET MVC 4 neue Vorlage

In dieser Übung werden Sie die Verbesserungen in den ASP.NET MVC 4-Projektvorlagen untersuchen und sich die relevantesten Features der neuen Vorlage ansehen.

Aufgabe 1: Erkunden der ASP.NET MVC 4-Internetanwendungsvorlage

Wenn noch nicht geöffnet, starten Sie VS Express für Web
Wählen Sie die Datei | Neu | Befehl 'Projektmenü '. Wählen Sie im Dialogfeld "Neues Projekt " das Visual C#|Webvorlage in der linken Bereichsstruktur, und wählen Sie die ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt MusicStore , und aktualisieren Sie den Projektmappennamen auf "Begin", und wählen Sie dann einen Speicherort aus (oder lassen Sie den Standardwert) aus, und klicken Sie auf "OK".

Erstellen eines neuen ASP.NET MVC 4-Projekts
Wählen Sie im Dialogfeld "Neues ASP.NET MVC 4-Projekt " die Projektvorlage "Internetanwendung " aus, und klicken Sie auf " OK". Beachten Sie, dass Sie entweder Razor oder ASPX als Ansichtsmodul auswählen können.

Erstellen einer neuen ASP.NET MVC 4-Internetanwendung

Hinweis

Razor-Syntax wurde in ASP.NET MVC 3 eingeführt. Das Ziel ist es, die Anzahl der zeichen- und Tastaturanschläge zu minimieren, die in einer Datei erforderlich sind, um einen schnellen und dynamischen Codierungsworkflow zu ermöglichen. Razor nutzt vorhandene C#/VB(oder andere) Sprachkenntnisse und bietet eine Vorlagenmarkupsyntax, die einen fantastischen HTML-Konstruktionsworkflow ermöglicht.
Drücken Sie F5 , um die Lösung auszuführen und die erneuerte Vorlage anzuzeigen. Sie können die folgenden Features auschecken:
1. Vorlagen im modernen Stil
  
  Die Vorlagen wurden erneuert und bieten modernere Stile.
  
  ASP.NET MVC 4 restylierte Vorlagen
2. Adaptives Rendering
  
  Sehen Sie sich die Größenänderung des Browserfensters an, und beachten Sie, wie sich das Seitenlayout dynamisch an die neue Fenstergröße anpasst. Diese Vorlagen verwenden die adaptive Renderingtechnik, um sowohl auf Desktop- als auch auf mobilen Plattformen ohne Anpassung ordnungsgemäß zu rendern.
  
  ASP.NET MVC 4-Projektvorlage in verschiedenen Browsergrößen
Schließen Sie den Browser, um den Debugger zu beenden und zu Visual Studio zurückzukehren.
Jetzt können Sie die Lösung erkunden und einige der neuen Features auschecken, die von ASP.NET MVC 4 in der Projektvorlage eingeführt wurden.

Die ASP.NET MVC 4 Internet Application Project Template
1. HTML5-Markup
  
  Durchsuchen Sie Vorlagenansichten, um das neue Designmarkup zu ermitteln, z. B. öffnen Sie die About.cshtml-Ansicht im Ordner "Start ".
  
  Neue Vorlage mit Razor- und HTML5-Markup
2. Enthaltene JavaScript-Bibliotheken
  1. jQuery: jQuery vereinfacht das Durchlaufen von HTML-Dokumenten, die Ereignisbehandlung, das Animieren und Ajax-Interaktionen.
  2. jQuery UI: Diese Bibliothek bietet Abstraktionen für Interaktion und Animation auf niedriger Ebene, erweiterte Effekte und designfähige Widgets, die auf der jQuery JavaScript-Bibliothek basieren.
    
    Hinweis
    
    In [http://docs.jquery.com/](http://docs.jquery.com/) erfahren Sie mehr über jQuery und jQuery UI.
  3. KnockoutJS: Die ASP.NET MVC 4-Standardvorlage enthält jetzt KnockoutJS, ein JavaScript MVVM-Framework, mit dem Sie umfangreiche und reaktionsfähige Webanwendungen mit JavaScript und HTML erstellen können. Wie in ASP.NET MVC 3 sind jQuery- und jQuery UI-Bibliotheken auch in ASP.NET MVC 4 enthalten.
    
    Hinweis
    
    Weitere Informationen zur KnockOutJS-Bibliothek finden Sie unter diesem Link: http://learn.knockoutjs.com/.
  4. Modernizr: Diese Bibliothek wird automatisch ausgeführt, sodass Ihre Website mit älteren Browsern kompatibel ist, wenn SIE HTML5- und CSS3-Technologien verwenden.
    
    Hinweis
    
    Weitere Informationen zur Modernizr-Bibliothek finden Sie unter diesem Link: http://www.modernizr.com/.
3. SimpleMembership in der Lösung enthalten
  
  SimpleMembership wurde als Ersatz für das vorherige ASP.NET Rollen- und Mitgliedschaftsanbietersystem entwickelt. Es verfügt über viele neue Features, die es dem Entwickler erleichtern, Webseiten flexibler zu sichern.
  
  Die Internetvorlage hat bereits einige Dinge eingerichtet, um SimpleMembership zu integrieren, z. B. ist der AccountController bereit, OAuthWebSecurity (für die OAuth-Kontoregistrierung, Anmeldung, Verwaltung usw.) und WebSicherheit zu verwenden.
  
  SimpleMembership Im Lieferumfang der Lösung enthalten
  
  Hinweis
  
  Weitere Informationen zu OAuthWebSecurity in MSDN.

Hinweis

Darüber hinaus können Sie diese Anwendung in Windows Azure-Websites im folgenden Anhang B bereitstellen: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy.

Zusammenfassung

Mit diesem Hands-On Lab haben Sie die Grundlagen von ASP.NET MVC gelernt:

Die Kernelemente einer MVC-Anwendung und deren Interaktion
Erstellen einer ASP.NET MVC-Anwendung
Hinzufügen und Konfigurieren von Controllern zum Behandeln von Parametern, die über die URL und abfragezeichenfolge übergeben werden
So fügen Sie eine Layoutgestaltungsvorlage hinzu, um eine Vorlage für allgemeine HTML-Inhalte einzurichten, ein StyleSheet zum Verbessern des Erscheinungsbilds und einer Ansichtsvorlage zum Anzeigen von HTML-Inhalten
Verwenden des ViewModel-Musters zum Übergeben von Eigenschaften an die Ansichtsvorlage zum Anzeigen dynamischer Informationen
Verwenden von Parametern, die an Controller in der Ansichtsvorlage übergeben werden
So fügen Sie Links zu Seiten innerhalb der ASP.NET MVC-Anwendung hinzu
Hinzufügen und Verwenden dynamischer Eigenschaften in einer Ansicht
Die Verbesserungen in den ASP.NET MVC 4-Projektvorlagen

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.

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.
Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.
Klicken Sie nach dem Öffnen des Webplattform-Installers auf "Installieren ", um das Setup zu starten.

Installieren von Visual Studio Express
Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf "Ich stimme zu", um den Vorgang fortzusetzen.

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

Installationsfortschritt
Wenn die Installation abgeschlossen ist, klicken Sie auf "Fertig stellen".

Installation abgeschlossen
Klicken Sie auf "Beenden ", um den Webplattform-Installer zu schließen.
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

Anhang B: Veröffentlichen einer ASP.NET MVC 4-Anwendung mit Web Deploy

In diesem Anhang wird gezeigt, wie Sie eine neue Website über das Windows Azure-Verwaltungsportal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie die von Windows Azure bereitgestellte Web Deploy-Veröffentlichungsfunktion nutzen.

Aufgabe 1 – Erstellen einer neuen Website über das Windows Azure-Portal

Wechseln Sie zum Windows Azure-Verwaltungsportal , und melden Sie sich mit den Microsoft-Anmeldeinformationen an, die Ihrem Abonnement zugeordnet sind.

Hinweis

Mit Windows Azure können Sie 10 ASP.NET Websites kostenlos hosten und dann skalieren, wenn Ihr Datenverkehr wächst. Sie können sich hier registrieren.

Anmelden beim Windows Azure-Verwaltungsportal
Klicken Sie auf der Befehlsleiste auf "Neu ".

Erstellen einer neuen Website
Klicken Sie auf "Computewebsite | ". Wählen Sie dann die Option "Schnellerstellung " aus. Geben Sie eine verfügbare URL für die neue Website an, und klicken Sie auf " Website erstellen".

Hinweis

Eine Windows Azure-Website ist der Host für eine Webanwendung, die in der Cloud ausgeführt wird, die Sie steuern und verwalten können. Mit der Option "Schnellerstellung" können Sie eine fertige Webanwendung von außerhalb des Portals auf der Windows Azure-Website bereitstellen. Sie enthält keine Schritte zum Einrichten einer Datenbank.

Erstellen einer neuen Website mithilfe der Schnellerstellung
Warten Sie, bis die neue Website erstellt wird.
Nachdem die Website erstellt wurde, klicken Sie auf den Link unter der URL-Spalte . Überprüfen Sie, ob die neue Website funktioniert.

Navigieren zur neuen Website

Website wird ausgeführt
Wechseln Sie zurück zum Portal, und klicken Sie auf den Namen der Website unter der Spalte "Name ", um die Verwaltungsseiten anzuzeigen.

Öffnen der Websiteverwaltungsseiten
Klicken Sie auf der Seite "Dashboard " im Abschnitt "Schnellblick " auf den Link "Veröffentlichungsprofil herunterladen".

Hinweis

Das Veröffentlichungsprofil enthält alle Informationen, die zum Veröffentlichen einer Webanwendung auf einer Windows Azure-Website für jede aktivierte Publikationsmethode erforderlich sind. Das Veröffentlichungsprofil enthält die URLs, Benutzeranmeldeinformationen und Datenbankzeichenfolgen, die erforderlich sind, um eine Verbindung mit jedem der Endpunkte herzustellen und zu authentifizieren, für die eine Publikationsmethode aktiviert ist. Microsoft WebMatrix 2, Microsoft Visual Studio Express für Web und Microsoft Visual Studio 2012 unterstützen das Lesen von Veröffentlichungsprofilen, um die Konfiguration dieser Programme zum Veröffentlichen von Webanwendungen auf Windows Azure-Websites zu automatisieren.

Herunterladen des Veröffentlichungsprofils der Website
Laden Sie die Veröffentlichungsprofildatei an einen bekannten Speicherort herunter. In dieser Übung erfahren Sie, wie Sie diese Datei verwenden, um eine Webanwendung in einer Windows Azure-Website aus Visual Studio zu veröffentlichen.

Speichern der Veröffentlichungsprofildatei

Aufgabe 2 : Konfigurieren des Datenbankservers

Wenn Ihre Anwendung SQL Server-Datenbanken verwendet, müssen Sie einen SQL-Datenbank Server erstellen. Wenn Sie eine einfache Anwendung bereitstellen möchten, die sql Server nicht verwendet, überspringen Sie diese Aufgabe möglicherweise.

Sie benötigen einen SQL-Datenbank Server zum Speichern der Anwendungsdatenbank. Sie können die SQL-Datenbank Server aus Ihrem Abonnement im Windows Azure-Verwaltungsportal im Dashboard von Sql Databases | Servers anzeigen | . Wenn Sie keinen Server erstellt haben, können Sie einen mit der Schaltfläche "Hinzufügen " auf der Befehlsleiste erstellen. Notieren Sie sich den Servernamen und die URL, den Administratoranmeldungsnamen und das Kennwort, wie Sie sie in den nächsten Aufgaben verwenden werden. Erstellen Sie die Datenbank noch nicht, da sie in einer späteren Phase erstellt wird.

SQL-Datenbank Serverdashboard
In der nächsten Aufgabe testen Sie die Datenbankverbindung von Visual Studio, aus diesem Grund müssen Sie Ihre lokale IP-Adresse in die Liste der zulässigen IP-Adressen des Servers aufnehmen. Klicken Sie dazu auf "Konfigurieren", wählen Sie die IP-Adresse aus der aktuellen Client-IP-Adresse aus, fügen Sie sie in die Textfelder "START-IP-Adresse " und "IP-Adresse beenden" ein, und klicken Sie auf die Schaltfläche.

Hinzufügen der Client-IP-Adresse
Nachdem die Client-IP-Adresse der Liste zulässiger IP-Adressen hinzugefügt wurde, klicken Sie auf " Speichern ", um die Änderungen zu bestätigen.

Änderungen bestätigen

Aufgabe 3 – Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

Wechseln Sie zurück zur ASP.NET MVC 4-Lösung. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Websiteprojekt, und wählen Sie "Veröffentlichen" aus.

Veröffentlichen der Website
Importieren Sie das Veröffentlichungsprofil, das Sie in der ersten Aufgabe gespeichert haben.

Importieren des Veröffentlichungsprofils
Klicken Sie auf " Verbindung überprüfen". Klicken Sie nach Abschluss der Überprüfung auf Weiter.

Hinweis

Die Überprüfung ist abgeschlossen, sobald neben der Schaltfläche "Verbindung überprüfen" ein grünes Häkchen angezeigt wird.

Überprüfen der Verbindung
Klicken Sie auf der Seite "Einstellungen " im Abschnitt "Datenbanken " auf die Schaltfläche neben dem Textfeld ihrer Datenbankverbindung (d. h. DefaultConnection).

Webbereitstellungskonfiguration
Konfigurieren Sie die Datenbankverbindung wie folgt:
- Geben Sie im Servernamen ihre SQL-Datenbank Server-URL mit dem Präfix tcp: ein.
- Geben Sie unter " Benutzername" den Anmeldenamen des Serveradministrators ein.
- Geben Sie im Kennwort das Anmeldekennwort ihres Serveradministrators ein.
- Geben Sie einen neuen Datenbanknamen ein, z. B. MVC4SampleDB.
  
  Konfigurieren von Ziel-Verbindungszeichenfolge
Klicken Sie dann auf OK. Wenn Sie aufgefordert werden, die Datenbank zu erstellen, klicken Sie auf "Ja".

Erstellen der Datenbank
Die Verbindungszeichenfolge, die Sie zum Herstellen einer Verbindung mit SQL-Datenbank in Windows Azure verwenden, wird im Textfeld "Standardverbindung" angezeigt. Klicken Sie dann auf Weiter.

Verbindungszeichenfolge, die auf SQL-Datenbank zeigt
Klicken Sie auf der Seite "Vorschau " auf "Veröffentlichen".

Veröffentlichen der Webanwendung
Sobald der Veröffentlichungsprozess abgeschlossen ist, öffnet Ihr Standardbrowser die veröffentlichte Website.

Anwendung veröffentlicht in Windows Azure

Anhang C: 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#)

Platzieren Sie den Cursor an der Stelle, an der Sie den Code einfügen möchten.
Beginnen Sie mit der Eingabe des Codeausschnittnamens (ohne Leerzeichen oder Bindestriche).
Sehen Sie sich an, wie IntelliSense übereinstimmende Codeausschnittnamen anzeigt.
Wählen Sie den richtigen Codeausschnitt aus (oder halten Sie die Eingabe, bis der Name des gesamten Codeausschnitts ausgewählt ist).
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.

Wählen Sie "Codeausschnitt einfügen" gefolgt von "Codeausschnitte" aus.
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.

Freigeben über

ASP.NET MVC 4 Fundamentals

Die Music Store-Anwendung

ASP.NET MVC 4 Essentials

Ziele

Voraussetzungen

Setup

Übungen

Übung 1: Erstellen von MusicStore ASP.NET MVC-Webanwendungsprojekt

Aufgabe 1 : Erstellen des ASP.NET MVC-Webanwendungsprojekts

Aufgabe 2 – Untersuchen der Lösungsstruktur

Aufgabe 3 – Hinzufügen eines HomeControllers

Aufgabe 4 – Ausführen der Anwendung

Übung 2: Erstellen eines Controllers

Aufgabe 1 : Hinzufügen einer neuen StoreController-Klasse

Aufgabe 2 : Ändern der Aktionen des StoreControllers

Aufgabe 3 – Ausführen der Anwendung

Übung 3: Übergeben von Parametern an einen Controller

Aufgabe 1 : Hinzufügen des Genreparameters zu StoreController

Aufgabe 2 – Ausführen der Anwendung

Aufgabe 3 – Hinzufügen eines in die URL eingebetteten ID-Parameters

Aufgabe 4 – Ausführen der Anwendung

Übung 4: Erstellen einer Ansicht

Aufgabe 1 : Ändern der Datei _layout.cshtml

Aufgabe 2 – Hinzufügen von CSS-Stylesheets

Aufgabe 3 – Hinzufügen einer Ansichtsvorlage

Aufgabe 4: Überprüfung

Übung 5: Erstellen eines Ansichtsmodells

Aufgabe 1 – Erstellen einer ViewModel-Klasse

Aufgabe 2 : Hinzufügen von Eigenschaften zur ViewModel-Klasse

Aufgabe 3 : Aktualisieren des StoreControllers für die Verwendung des StoreIndexViewModel

Aufgabe 4 – Erstellen einer Ansichtsvorlage, die StoreIndexViewModel verwendet

Aufgabe 5 – Aktualisieren der Ansichtsvorlage

Übung 6: Verwenden von Parametern in der Ansicht

Aufgabe 1 – Hinzufügen von Modellklassen

Aufgabe 2 : Hinzufügen eines StoreBrowseViewModel

Aufgabe 3 – Verwenden des neuen ViewModels im StoreController

Aufgabe 4 – Hinzufügen einer Ansichtsvorlage "Durchsuchen"

Aufgabe 5 – Ausführen der Anwendung

Aufgabe 6 – Anzeigen von Informationen zu einem bestimmten Album

Aufgabe 7 – Ausführen der Anwendung

Aufgabe 8 – Hinzufügen von Verknüpfungen zwischen Seiten

Aufgabe 9 – Ausführen der Anwendung

Aufgabe 10 – Verwenden der dynamischen ViewModel-Auflistung zum Übergeben von Werten

Aufgabe 11 – Ausführen der Anwendung

Übung 7: Eine Runde um ASP.NET MVC 4 neue Vorlage

Aufgabe 1: Erkunden der ASP.NET MVC 4-Internetanwendungsvorlage

Zusammenfassung

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

Anhang B: Veröffentlichen einer ASP.NET MVC 4-Anwendung mit Web Deploy

Aufgabe 1 – Erstellen einer neuen Website über das Windows Azure-Portal

Aufgabe 2 : Konfigurieren des Datenbankservers

Aufgabe 3 – Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

Anhang C: Verwenden von Codeausschnitten

Feedback

Zusätzliche Ressourcen