Praktische Übungseinheiten: Erstellen einer Single-Page-Webanwendung (SPA) mit der ASP.NET-Web-API und Angular.js
von Web Camps Team
Herunterladen des Trainingskits für Webcamps
In diesem praktischen Lab erfahren Sie, wie Sie eine Single Page Application (SPA) mit ASP.NET-Web-API und Angular.js für ASP.NET 4.x erstellen.
In diesem Hand-On-Lab nutzen Sie diese Technologien, um Geek Quiz zu implementieren, eine Trivia-Website, die auf dem SPA-Konzept basiert. Sie implementieren zunächst die Dienstebene mit ASP.NET-Web-API, um die erforderlichen Endpunkte verfügbar zu machen, um die Quizfragen abzurufen und die Antworten zu speichern. Anschließend erstellen Sie eine umfassende und reaktionsfähige Benutzeroberfläche mit AngularJS- und CSS3-Transformationseffekten.
In herkömmlichen Webanwendungen initiiert der Client (Browser) die Kommunikation mit dem Server, indem eine Seite angefordert wird. Der Server verarbeitet dann die Anforderung und sendet den HTML-Code der Seite an den Client. In nachfolgenden Interaktionen mit der Seite – z. B. navigiert der Benutzer zu einem Link oder sendet ein Formular mit Daten – wird eine neue Anforderung an den Server gesendet, und der Flow beginnt erneut: Der Server verarbeitet die Anforderung und sendet eine neue Seite an den Browser als Reaktion auf die neue Aktion, die vom Client angefordert wurde.
In Single-Page Applications (SPAs) wird die gesamte Seite nach der ersten Anforderung im Browser geladen, aber nachfolgende Interaktionen erfolgen über Ajax-Anforderungen. Dies bedeutet, dass der Browser nur den Teil der Seite aktualisieren muss, der sich geändert hat. Es ist nicht erforderlich, die gesamte Seite neu zu laden. Der SPA-Ansatz reduziert die Zeit, die die Anwendung benötigt, um auf Benutzeraktionen zu reagieren, was zu einer flüssigeren Benutzeroberfläche führt.
Die Architektur eines SPA beinhaltet bestimmte Herausforderungen, die in herkömmlichen Webanwendungen nicht vorhanden sind. Neue Technologien wie ASP.NET-Web-API, JavaScript-Frameworks wie AngularJS und neue Stylingfeatures, die von CSS3 bereitgestellt werden, machen es jedoch sehr einfach, SPAs zu entwerfen und zu erstellen.
Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, das unter https://aka.ms/webcamps-training-kitverfügbar ist.
Überblick
Ziele
In diesem praktischen Lab lernen Sie Folgendes:
- Erstellen eines ASP.NET-Web-API-Diensts zum Senden und Empfangen von JSON-Daten
- Erstellen einer reaktionsfähigen Benutzeroberfläche mit AngularJS
- Verbessern der Benutzeroberfläche mit CSS3-Transformationen
Voraussetzungen
Folgendes ist erforderlich, um dieses praktische Lab abzuschließen:
- Visual Studio Express 2013 für Web oder höher
Einrichten
Um die Übungen in diesem praktischen Lab auszuführen, müssen Sie zuerst Ihre Umgebung einrichten.
- Öffnen Sie Windows Explorer, und navigieren Sie zum Ordner Quelle des Labs.
- Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie Als Administrator ausführen aus, um den Setupprozess zu starten, mit dem Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für dieses Lab installiert werden.
- Wenn das Dialogfeld Benutzerkontensteuerung angezeigt wird, bestätigen Sie, dass die Aktion fortgesetzt werden soll.
Hinweis
Stellen Sie sicher, dass Sie alle Abhängigkeiten für dieses Lab überprüft haben, bevor Sie das Setup ausführen.
Verwenden der Codeausschnitte
Im gesamten Labdokument werden Sie angewiesen, Codeblöcke einzufügen. Zur Vereinfachung wird der größte Teil dieses Codes als Visual Studio Code-Codeausschnitte bereitgestellt, auf die Sie von Visual Studio 2013 aus zugreifen können, um zu vermeiden, dass er manuell hinzugefügt werden muss.
Hinweis
Jede Übung wird von einer Startlösung begleitet, die sich im Ordner Begin der Übung befindet, mit der Sie jede Übung unabhängig von den anderen verfolgen können. Beachten Sie, dass die Codeausschnitte, die während einer Übung hinzugefügt werden, in diesen Startlösungen fehlen und möglicherweise erst funktionieren, wenn Sie die Übung abgeschlossen haben. Im Quellcode für eine Übung finden Sie auch einen Ordner End , der eine Visual Studio-Projektmappe mit dem Code enthält, der sich aus dem Ausführen der Schritte in der entsprechenden Übung ergibt. Sie können diese Lösungen als Leitfaden verwenden, wenn Sie zusätzliche Hilfe benötigen, während Sie dieses praktische Lab durchlaufen.
Übungen
Dieses praktische Lab umfasst die folgenden Übungen:
Geschätzte Zeit für die Durchführung dieses Labs: 60 Minuten
Hinweis
Wenn Sie Visual Studio zum ersten Mal starten, müssen Sie eine der vordefinierten Einstellungssammlungen auswählen. Jede vordefinierte Sammlung ist so konzipiert, dass sie einem bestimmten Entwicklungsstil entspricht, und bestimmt Fensterlayouts, Editorverhalten, IntelliSense-Codeausschnitte und Dialogfeldoptionen. Die Prozeduren in diesem Lab beschreiben die Aktionen, die zum Ausführen einer bestimmten Aufgabe in Visual Studio bei Verwendung der Sammlung Allgemeine Entwicklungseinstellungen erforderlich sind. Wenn Sie eine andere Einstellungssammlung für Ihre Entwicklungsumgebung auswählen, gibt es möglicherweise Unterschiede in den Schritten, die Sie berücksichtigen sollten.
Übung 1: Erstellen einer Web-API
Einer der wichtigsten Bestandteile eines SPA ist die Serviceschicht. Sie ist für die Verarbeitung der von der Benutzeroberfläche gesendeten Ajax-Aufrufe und die Rückgabe von Daten als Reaktion auf diesen Aufruf verantwortlich. Die abgerufenen Daten sollten in einem maschinenlesbaren Format angezeigt werden, um vom Client analysiert und genutzt zu werden.
Das Web-API-Framework ist Teil des ASP.NET Stack und wurde entwickelt, um die Implementierung von HTTP-Diensten zu vereinfachen, wobei in der Regel JSON- oder XML-formatierte Daten über eine RESTful-API gesendet und empfangen werden. In dieser Übung erstellen Sie die Website zum Hosten der Geek Quiz-Anwendung und implementieren dann den Back-End-Dienst, um die Quizdaten mit ASP.NET-Web-API verfügbar zu machen und zu speichern.
Aufgabe 1: Erstellen des anfänglichen Projekts für Geek Quiz
In dieser Aufgabe beginnen Sie mit dem Erstellen eines neuen ASP.NET MVC-Projekts mit Unterstützung für ASP.NET-Web-API basierend auf dem Projekttyp One ASP.NET, der in Visual Studio enthalten ist. Eine ASP.NET vereint alle ASP.NET Technologien und gibt Ihnen die Möglichkeit, diese nach Belieben zu mischen und abzugleichen. Anschließend fügen Sie die Modellklassen von Entity Framework und den Datenbankinitialisierer hinzu, um die Quizfragen einzufügen.
Öffnen Sie Visual Studio Express 2013 für Web, und wählen Sie Datei | Neues Projekt... , um eine neue Lösung zu starten.
Erstellen eines neuen Projekts
Wählen Sie im Dialogfeld Neues Projekt die Option ASP.NET Webanwendung unter Visual C# | Registerkarte "Web". Stellen Sie sicher, dass .NET Framework 4.5 ausgewählt ist, nennen Sie ihn GeekQuiz, wählen Sie einen Standort aus, und klicken Sie auf OK.
Erstellen eines neuen ASP.NET Webanwendungsprojekts
Wählen Sie im Dialogfeld Neues ASP.NET Projekt die MVC-Vorlage aus, und wählen Sie die Option Web-API aus. Stellen Sie außerdem sicher, dass die Authentifizierungsoption auf Einzelne Benutzerkonten festgelegt ist. Klicken Sie zum Fortsetzen des Vorgangs auf OK .
Erstellen eines neuen Projekts mit der MVC-Vorlage, einschließlich Web-API-Komponenten
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Models des GeekQuiz-Projekts, und wählen Sie Hinzufügen | Vorhandenes Element....
Hinzufügen eines vorhandenen Elements
Navigieren Sie im Dialogfeld Vorhandenes Element hinzufügen zum Ordner Quelle/Objekte/Modelle , und wählen Sie alle Dateien aus. Klicken Sie auf Hinzufügen.
Hinzufügen der Modellressourcen
Hinweis
Durch Hinzufügen dieser Dateien fügen Sie das Datenmodell, den Datenbankkontext von Entity Framework und den Datenbankinitialisierer für die Geek Quiz-Anwendung hinzu.
Entity Framework (EF) ist ein objekt relationaler Mapper (ORM), mit dem Sie Datenzugriffsanwendungen erstellen können, indem Sie mit einem konzeptionellen Anwendungsmodell programmieren, anstatt direkt mit einem relationalen Speicherschema zu programmieren. Weitere Informationen zu Entity Framework finden Sie hier.
Im Folgenden sehen Sie eine Beschreibung der gerade hinzugefügten Klassen:
- TriviaOption: Stellt eine einzelne Option dar, die einer Quizfrage zugeordnet ist
- TriviaQuestion: stellt eine Quizfrage dar und macht die zugeordneten Optionen über die Options-Eigenschaft verfügbar.
- TriviaAnswer: stellt die option dar, die der Benutzer als Antwort auf eine Quizfrage ausgewählt hat.
- TriviaContext: Stellt den Datenbankkontext der Geek Quiz-Anwendung von Entity Framework dar. Diese Klasse leitet sich von DContext ab und macht DbSet-Eigenschaften verfügbar, die Auflistungen der oben beschriebenen Entitäten darstellen.
- TriviaDatabaseInitializer: Die Implementierung des Entity Framework-Initialisierers für die TriviaContext-Klasse , die von CreateDatabaseIfNotExists erbt. Das Standardverhalten dieser Klasse besteht darin, die Datenbank nur zu erstellen, wenn sie nicht vorhanden ist, und fügt die in der Seed-Methode angegebenen Entitäten ein.
Öffnen Sie die Datei Global.asax.cs , und fügen Sie die folgende using-Anweisung hinzu.
using GeekQuiz.Models;Fügen Sie am Anfang der Application_Start-Methode den folgenden Code hinzu, um triviaDatabaseInitializer als Datenbankinitialisierer festzulegen.
public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { System.Data.Entity.Database.SetInitializer(new TriviaDatabaseInitializer()); AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } }Ändern Sie den Startcontroller , um den Zugriff auf authentifizierte Benutzer einzuschränken. Öffnen Sie hierzu die Datei HomeController.cs im Ordner Controller, und fügen Sie der Definition der HomeController-Klasse das Authorize-Attribut hinzu.
namespace GeekQuiz.Controllers { [Authorize] public class HomeController : Controller { public ActionResult Index() { return View(); } ... } }Hinweis
Der Autorisieren-Filter überprüft, ob der Benutzer authentifiziert ist. Wenn der Benutzer nicht authentifiziert ist, gibt er HTTP-status Code 401 (Nicht autorisiert) zurück, ohne die Aktion zu aufrufen. Sie können den Filter global, auf Controllerebene oder auf der Ebene einzelner Aktionen anwenden.
Sie passen nun das Layout der Webseiten und das Branding an. Öffnen Sie hierzu die Datei _Layout.cshtml in der Ansicht | Freigegebener Ordner, und aktualisieren Sie den Inhalt des <Titelelements> , indem Sie My ASP.NET Application durch Geek Quiz ersetzen.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - Geek Quiz</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head>Aktualisieren Sie in derselben Datei die Navigationsleiste, indem Sie die Links Info und Kontakt entfernen und den Startlink in Play umbenennen. Benennen Sie außerdem den Link Anwendungsname in Geek Quiz um. Der HTML-Code für die Navigationsleiste sollte wie der folgende Code aussehen.
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Geek Quiz", "Index", "Home", null, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Play", "Index", "Home")</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </div>Aktualisieren Sie die Fußzeile der Layoutseite, indem Sie My ASP.NET Application durch Geek Quiz ersetzen. Ersetzen Sie dazu den Inhalt des <Fußzeilenelements> durch den folgenden hervorgehobenen Code.
<div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - Geek Quiz</p> </footer> </div>
Aufgabe 2: Erstellen der TriviaController-Web-API
In der vorherigen Aufgabe haben Sie die anfängliche Struktur der Geek Quiz-Webanwendung erstellt. Sie erstellen nun einen einfachen Web-API-Dienst, der mit dem Quizdatenmodell interagiert und die folgenden Aktionen verfügbar macht:
- GET /api/trivia: Ruft die nächste Frage aus der Quizliste ab, die vom authentifizierten Benutzer beantwortet werden soll.
- POST /api/trivia: Speichert die vom authentifizierten Benutzer angegebene Quizantwort.
Sie verwenden die von Visual Studio bereitgestellten ASP.NET Scaffolding-Tools, um die Baseline für die Web-API-Controllerklasse zu erstellen.
Öffnen Sie die Datei WebApiConfig.cs im Ordner App_Start . Diese Datei definiert die Konfiguration des Web-API-Diensts, z. B. die Zuordnung von Routen zu Web-API-Controlleraktionen.
Fügen Sie die folgende using-Anweisung am Anfang der Datei hinzu.
using Newtonsoft.Json.Serialization;Fügen Sie der Register-Methode den folgenden hervorgehobenen Code hinzu, um den Formatierer für die VON den Web-API-Aktionsmethoden abgerufenen JSON-Daten global zu konfigurieren.
public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Use camel case for JSON data. config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } }Hinweis
Der CamelCasePropertyNamesContractResolver konvertiert Eigenschaftsnamen automatisch in die Kamel-Großschreibung, die allgemeine Konvention für Eigenschaftsnamen in JavaScript.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller des GeekQuiz-Projekts, und wählen Sie Hinzufügen | Neues Gerüstelement....
Erstellen eines neuen Gerüstelements
Stellen Sie im Dialogfeld Gerüst hinzufügen sicher, dass der Knoten Allgemein im linken Bereich ausgewählt ist. Wählen Sie dann im mittleren Bereich die Vorlage Web-API 2 Controller – Leere aus, und klicken Sie auf Hinzufügen.
Auswählen der leeren Web-API 2-Controller-Vorlage
Hinweis
ASP.NET Scaffolding ist ein Codegenerierungsframework für ASP.NET Webanwendungen. Visual Studio 2013 enthält vorinstallierte Codegeneratoren für MVC- und Web-API-Projekte. Sie sollten Gerüste in Ihrem Projekt verwenden, wenn Sie schnell Code hinzufügen möchten, der mit Datenmodellen interagiert, um die Zeit zu reduzieren, die für die Entwicklung von Standarddatenvorgängen erforderlich ist.
Der Gerüstbauprozess stellt außerdem sicher, dass alle erforderlichen Abhängigkeiten im Projekt installiert werden. Wenn Sie z. B. mit einem leeren ASP.NET Projekt beginnen und dann ein Gerüst zum Hinzufügen eines Web-API-Controllers verwenden, werden ihrem Projekt automatisch die erforderlichen NuGet-Pakete und Verweise der Web-API hinzugefügt.
Geben Sie im Dialogfeld Controller hinzufügen den Namen TriviaController in das Textfeld Controllername ein, und klicken Sie auf Hinzufügen.
Hinzufügen des Trivia-Controllers
Die Datei TriviaController.cs wird dann dem Ordner Controller des GeekQuiz-Projekts hinzugefügt, die eine leere TriviaController-Klasse enthält. Fügen Sie am Anfang der Datei die folgenden using-Anweisungen hinzu.
(Codeausschnitt – AspNetWebApiSpa – Ex1 – TriviaControllerUsings)
using System.Data.Entity; using System.Threading; using System.Threading.Tasks; using System.Web.Http.Description; using GeekQuiz.Models;Fügen Sie am Anfang der TriviaController-Klasse den folgenden Code hinzu, um die TriviaContext-instance im Controller zu definieren, zu initialisieren und zu entsorgen.
(Codeausschnitt – AspNetWebApiSpa – Ex1 – TriviaControllerContext)
public class TriviaController : ApiController { private TriviaContext db = new TriviaContext(); protected override void Dispose(bool disposing) { if (disposing) { this.db.Dispose(); } base.Dispose(disposing); } }Hinweis
Die Dispose-Methode von TriviaController ruft die Dispose-Methode der TriviaContext-instance auf, die sicherstellt, dass alle vom Kontextobjekt verwendeten Ressourcen freigegeben werden, wenn die TriviaContext-instance entsorgt oder mit Müll gesammelt wird. Dies schließt das Schließen aller von Entity Framework geöffneten Datenbankverbindungen ein.
Fügen Sie am Ende der TriviaController-Klasse die folgende Hilfsmethode hinzu. Diese Methode ruft die folgende Quizfrage aus der Datenbank ab, die vom angegebenen Benutzer beantwortet werden soll.
(Codeausschnitt – AspNetWebApiSpa – Ex1 – TriviaControllerNextQuestion)
private async Task<TriviaQuestion> NextQuestionAsync(string userId) { var lastQuestionId = await this.db.TriviaAnswers .Where(a => a.UserId == userId) .GroupBy(a => a.QuestionId) .Select(g => new { QuestionId = g.Key, Count = g.Count() }) .OrderByDescending(q => new { q.Count, QuestionId = q.QuestionId }) .Select(q => q.QuestionId) .FirstOrDefaultAsync(); var questionsCount = await this.db.TriviaQuestions.CountAsync(); var nextQuestionId = (lastQuestionId % questionsCount) + 1; return await this.db.TriviaQuestions.FindAsync(CancellationToken.None, nextQuestionId); }Fügen Sie der TriviaController-Klasse die folgende Get-Aktionsmethode hinzu. Diese Aktionsmethode ruft die im vorherigen Schritt definierte NextQuestionAsync-Hilfsmethode auf, um die nächste Frage für den authentifizierten Benutzer abzurufen.
(Codeausschnitt – AspNetWebApiSpa – Ex1 – TriviaControllerGetAction)
// GET api/Trivia [ResponseType(typeof(TriviaQuestion))] public async Task<IHttpActionResult> Get() { var userId = User.Identity.Name; TriviaQuestion nextQuestion = await this.NextQuestionAsync(userId); if (nextQuestion == null) { return this.NotFound(); } return this.Ok(nextQuestion); }Fügen Sie am Ende der TriviaController-Klasse die folgende Hilfsmethode hinzu. Diese Methode speichert die angegebene Antwort in der Datenbank und gibt einen booleschen Wert zurück, der angibt, ob die Antwort richtig ist oder nicht.
(Codeausschnitt – AspNetWebApiSpa – Ex1 – TriviaControllerStoreAsync)
private async Task<bool> StoreAsync(TriviaAnswer answer) { this.db.TriviaAnswers.Add(answer); await this.db.SaveChangesAsync(); var selectedOption = await this.db.TriviaOptions.FirstOrDefaultAsync(o => o.Id == answer.OptionId && o.QuestionId == answer.QuestionId); return selectedOption.IsCorrect; }Fügen Sie der TriviaController-Klasse die folgende Post-Action-Methode hinzu. Diese Aktionsmethode ordnet die Antwort dem authentifizierten Benutzer zu und ruft die StoreAsync-Hilfsmethode auf. Anschließend wird eine Antwort mit dem booleschen Wert gesendet, der von der Hilfsmethode zurückgegeben wird.
(Codeausschnitt – AspNetWebApiSpa – Ex1 – TriviaControllerPostAction)
// POST api/Trivia [ResponseType(typeof(TriviaAnswer))] public async Task<IHttpActionResult> Post(TriviaAnswer answer) { if (!ModelState.IsValid) { return this.BadRequest(this.ModelState); } answer.UserId = User.Identity.Name; var isCorrect = await this.StoreAsync(answer); return this.Ok<bool>(isCorrect); }Ändern Sie den Web-API-Controller, um den Zugriff auf authentifizierte Benutzer einzuschränken, indem Sie der TriviaController-Klassendefinition das Authorize-Attribut hinzufügen.
[Authorize] public class TriviaController : ApiController { ... }
Aufgabe 3: Ausführen der Lösung
In dieser Aufgabe überprüfen Sie, ob der Web-API-Dienst, den Sie in der vorherigen Aufgabe erstellt haben, wie erwartet funktioniert. Sie verwenden die Internet-Explorer F12-Entwicklertools, um den Netzwerkdatenverkehr zu erfassen und die vollständige Antwort des Web-API-Diensts zu überprüfen.
Hinweis
Stellen Sie sicher, dass internet Explorer auf der Schaltfläche Start auf der Visual Studio-Symbolleiste ausgewählt ist.
Drücken Sie F5, um die Projektmappe auszuführen. Die Seite "Anmelden" sollte im Browser angezeigt werden.
Hinweis
Beim Starten der Anwendung wird die MVC-Standardroute ausgelöst, die standardmäßig der Indexaktion der HomeController-Klasse zugeordnet ist. Da HomeController auf authentifizierte Benutzer beschränkt ist (denken Sie daran, dass Sie diese Klasse in Übung 1 mit dem Attribut Authorize versehen haben) und es noch keinen authentifizierten Benutzer gibt, leitet die Anwendung die ursprüngliche Anforderung an die Anmeldeseite um.
Ausführen der Projektmappe
Klicken Sie auf Registrieren , um einen neuen Benutzer zu erstellen.
Registrieren eines neuen Benutzers
Geben Sie auf der Seite Registrieren einen Benutzernamen und ein Kennwort ein, und klicken Sie dann auf Registrieren.
Seite "Registrieren"
Die Anwendung registriert das neue Konto, und der Benutzer wird authentifiziert und zurück zur Startseite weitergeleitet.
Benutzer wird authentifiziert
Drücken Sie im Browser F12 , um den Bereich Entwicklertools zu öffnen. Drücken Sie STRG + 4 , oder klicken Sie auf das Netzwerksymbol , und klicken Sie dann auf die grüne Pfeilschaltfläche, um mit der Erfassung von Netzwerkdatenverkehr zu beginnen.
Initiieren der Web-API-Netzwerkerfassung
Fügen Sie api/trivia an die URL in der Adressleiste des Browsers an. Sie überprüfen nun die Details der Antwort aus der Get-Aktionsmethode in TriviaController.
Abrufen der Daten der nächsten Frage über die Web-API
Hinweis
Sobald der Download abgeschlossen ist, werden Sie aufgefordert, eine Aktion mit der heruntergeladenen Datei auszuführen. Lassen Sie das Dialogfeld geöffnet, um den Antwortinhalt über das Entwicklertoolfenster watch zu können.
Nun untersuchen Sie den Textkörper der Antwort. Klicken Sie hierzu auf die Registerkarte Details , und klicken Sie dann auf Antworttext. Sie können überprüfen, ob es sich bei den heruntergeladenen Daten um ein Objekt handelt, indem Sie die Eigenschaftenoptionen (eine Liste der TriviaOption-Objekte ), die ID und den Titel , die der TriviaQuestion-Klasse entsprechen, entsprechen.
Anzeigen des Web-API-Antworttexts
Zurück zu Visual Studio, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden.
Übung 2: Erstellen der SPA-Schnittstelle
In dieser Übung erstellen Sie zuerst den Web-Front-End-Teil von Geek Quiz, wobei sie sich auf die Single-Page Anwendungsinteraktion mit AngularJS konzentrieren. Anschließend verbessern Sie die Benutzeroberfläche mit CSS3, um umfangreiche Animationen auszuführen und einen visuellen Effekt des Kontextwechsels beim Übergang von einer Frage zur nächsten bereitzustellen.
Aufgabe 1: Erstellen der SPA-Schnittstelle mit AngularJS
In dieser Aufgabe verwenden Sie AngularJS , um die Clientseite der Geek Quiz-Anwendung zu implementieren. AngularJS ist ein Open-Source-JavaScript-Framework, das browserbasierte Anwendungen um MVC-Funktionen (Model-View-Controller ) erweitert und die Entwicklung und Tests erleichtert.
Zunächst installieren Sie AngularJS über die Paket-Manager-Konsole von Visual Studio. Anschließend erstellen Sie den Controller, um das Verhalten der Geek Quiz-App und die Ansicht zum Rendern der Quizfragen und -antworten mithilfe der AngularJS-Vorlagen-Engine bereitzustellen.
Hinweis
Weitere Informationen zu AngularJS finden Sie unter [http://angularjs.org/](http://angularjs.org/).
Öffnen Sie Visual Studio Express 2013 für Web, und öffnen Sie die Projektmappe GeekQuiz.sln im Ordner Source/Ex2-CreatingASPAInterface/Begin. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.
Öffnen Sie die Paket-Manager-Konsole unter Tools>NuGet-Paket-Manager. Geben Sie den folgenden Befehl ein, um das AngularJS.Core-NuGet-Paket zu installieren.
Install-Package AngularJS.CoreKlicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Skripts des GeekQuiz-Projekts, und wählen Sie Hinzufügen | Neuer Ordner. Benennen Sie den Ordner app, und drücken Sie die EINGABETASTE.
Klicken Sie mit der rechten Maustaste auf den soeben erstellten App-Ordner , und wählen Sie Hinzufügen | JavaScript-Datei.
Erstellen einer neuen JavaScript-Datei
Geben Sie im Dialogfeld Name für Element angeben den Namen quiz-controller in das Textfeld Elementname ein, und klicken Sie auf OK.
Benennen der neuen JavaScript-Datei
Fügen Sie in der dateiquiz-controller.js den folgenden Code hinzu, um den AngularJS QuizCtrl-Controller zu deklarieren und zu initialisieren.
(Codeausschnitt – AspNetWebApiSpa – Ex2 – AngularQuizController)
angular.module('QuizApp', []) .controller('QuizCtrl', function ($scope, $http) { $scope.answered = false; $scope.title = "loading question..."; $scope.options = []; $scope.correctAnswer = false; $scope.working = false; $scope.answer = function () { return $scope.correctAnswer ? 'correct' : 'incorrect'; }; });Hinweis
Die Konstruktorfunktion des QuizCtrl-Controllers erwartet einen injizierbaren Parameter namens $scope. Der Anfangszustand des Bereichs sollte in der Konstruktorfunktion eingerichtet werden, indem Eigenschaften an das $scope -Objekt angefügt werden. Die Eigenschaften enthalten das Ansichtsmodell und sind für die Vorlage zugänglich, wenn der Controller registriert ist.
Der QuizCtrl-Controller wird in einem Modul namens QuizApp definiert. Module sind Arbeitseinheiten, mit denen Sie Ihre Anwendung in separate Komponenten aufteilen können. Der Standard Vorteile der Verwendung von Modulen besteht darin, dass der Code einfacher zu verstehen ist und Komponententests, Wiederverwendbarkeit und Wartbarkeit erleichtert.
Nun fügen Sie dem Bereich Verhalten hinzu, um auf Ereignisse zu reagieren, die von der Ansicht ausgelöst werden. Fügen Sie den folgenden Code am Ende des QuizCtrl-Controllers hinzu, um die nextQuestion-Funktion im $scope-Objekt zu definieren.
(Codeausschnitt – AspNetWebApiSpa – Ex2 – AngularQuizControllerNextQuestion)
.controller('QuizCtrl', function ($scope, $http) { ... $scope.nextQuestion = function () { $scope.working = true; $scope.answered = false; $scope.title = "loading question..."; $scope.options = []; $http.get("/api/trivia").success(function (data, status, headers, config) { $scope.options = data.options; $scope.title = data.title; $scope.answered = false; $scope.working = false; }).error(function (data, status, headers, config) { $scope.title = "Oops... something went wrong"; $scope.working = false; }); }; };Hinweis
Diese Funktion ruft die nächste Frage aus der Trivia-Web-API ab, die in der vorherigen Übung erstellt wurde, und fügt die Fragedaten an das $scope-Objekt an.
Fügen Sie den folgenden Code am Ende des QuizCtrl-Controllers ein, um die sendAnswer-Funktion im $scope-Objekt zu definieren.
(Codeausschnitt – AspNetWebApiSpa – Ex2 – AngularQuizControllerSendAnswer)
.controller('QuizCtrl', function ($scope, $http) { ... $scope.sendAnswer = function (option) { $scope.working = true; $scope.answered = true; $http.post('/api/trivia', { 'questionId': option.questionId, 'optionId': option.id }).success(function (data, status, headers, config) { $scope.correctAnswer = (data === true); $scope.working = false; }).error(function (data, status, headers, config) { $scope.title = "Oops... something went wrong"; $scope.working = false; }); }; };Hinweis
Diese Funktion sendet die vom Benutzer ausgewählte Antwort an die Trivia-Web-API und speichert das Ergebnis – d. h. ob die Antwort richtig ist oder nicht – im $scope-Objekt .
Die oben genannten Funktionen nextQuestion und sendAnswer verwenden das AngularJS -$http-Objekt , um die Kommunikation mit der Web-API über das XMLHttpRequest-JavaScript-Objekt aus dem Browser zu abstrahieren. AngularJS unterstützt einen anderen Dienst, der eine höhere Abstraktionsebene bietet, um CRUD-Vorgänge für eine Ressource über RESTful-APIs auszuführen. Das AngularJS -$resource-Objekt verfügt über Aktionsmethoden, die allgemeines Verhalten bereitstellen, ohne mit dem $http-Objekt interagieren zu müssen. Erwägen Sie die Verwendung des $resource-Objekts in Szenarien, die das CRUD-Modell erfordern (weitere Informationen finden Sie in der $resource Dokumentation).
Der nächste Schritt besteht darin, die AngularJS-Vorlage zu erstellen, die die Ansicht für das Quiz definiert. Öffnen Sie hierzu die Datei Index.cshtml in den Ansichten | Startordner , und ersetzen Sie den Inhalt durch den folgenden Code.
(Codeausschnitt – AspNetWebApiSpa – Ex2 – GeekQuizView)
@{ ViewBag.Title = "Play"; } <div id="bodyContainer" ng-app="QuizApp"> <section id="content"> <div class="container" > <div class="row"> <div class="flip-container text-center col-md-12" ng-controller="QuizCtrl" ng-init="nextQuestion()"> <div class="back" ng-class="{flip: answered, correct: correctAnswer, incorrect:!correctAnswer}"> <p class="lead">{{answer()}}</p> <p> <button class="btn btn-info btn-lg next option" ng-click="nextQuestion()" ng-disabled="working">Next Question</button> </p> </div> <div class="front" ng-class="{flip: answered}"> <p class="lead">{{title}}</p> <div class="row text-center"> <button class="btn btn-info btn-lg option" ng-repeat="option in options" ng-click="sendAnswer(option)" ng-disabled="working">{{option.title}}</button> </div> </div> </div> </div> </div> </section> </div> @section scripts { @Scripts.Render("~/Scripts/angular.js") @Scripts.Render("~/Scripts/app/quiz-controller.js") }Hinweis
Die AngularJS-Vorlage ist eine deklarative Spezifikation, die Informationen aus dem Modell und dem Controller verwendet, um statisches Markup in die dynamische Ansicht zu transformieren, die dem Benutzer im Browser angezeigt wird. Im Folgenden finden Sie Beispiele für AngularJS-Elemente und -Elementattribute, die in einer Vorlage verwendet werden können:
- Die ng-app-Direktive teilt AngularJS das DOM-Element mit, das das Stammelement der Anwendung darstellt.
- Die ng-controller-Direktive fügt an dem Punkt, an dem die Direktive deklariert wird, einen Controller an das DOM an.
- Die geschweifte Klammernotation {{ }} gibt Bindungen an die im Controller definierten Bereichseigenschaften an.
- Die ng-click-Direktive wird verwendet, um die im Bereich definierten Funktionen als Reaktion auf Benutzerklicks aufzurufen.
Öffnen Sie die Datei Site.css im Ordner Inhalt , und fügen Sie am Ende der Datei die folgenden hervorgehobenen Stile hinzu, um ein Erscheinungsbild für die Quizansicht zu bieten.
(Codeausschnitt – AspNetWebApiSpa – Ex2 – GeekQuizStyles)
.validation-summary-valid { display: none; } /* Geek Quiz styles */ .flip-container .back, .flip-container .front { border: 5px solid #00bcf2; padding-bottom: 30px; padding-top: 30px; } #content { position:relative; background:#fff; padding:50px 0 0 0; } .option { width:140px; margin: 5px; } div.correct p { color: green; } div.incorrect p { color: red; } .btn { border-radius: 0; } .flip-container div.front, .flip-container div.back.flip { display: block; } .flip-container div.front.flip, .flip-container div.back { display: none; }
Aufgabe 2: Ausführen der Lösung
In dieser Aufgabe führen Sie die Lösung mithilfe der neuen Benutzeroberfläche aus, die Sie mit AngularJS erstellt haben, um einige der Quizfragen zu beantworten.
Drücken Sie F5, um die Projektmappe auszuführen.
Registrieren Sie ein neues Benutzerkonto. Führen Sie dazu die in Übung 1, Aufgabe 3 beschriebenen Registrierungsschritte aus.
Hinweis
Wenn Sie die Lösung aus der vorherigen Übung verwenden, können Sie sich mit dem zuvor erstellten Benutzerkonto anmelden.
Die Startseite sollte mit der ersten Frage des Quiz angezeigt werden. Beantworten Sie die Frage, indem Sie auf eine der Optionen klicken. Dadurch wird die zuvor definierte sendAnswer-Funktion ausgelöst, die die ausgewählte Option an die Trivia-Web-API sendet.
Beantworten einer Frage
Nachdem Sie auf eine der Schaltflächen geklickt haben, sollte die Antwort angezeigt werden. Klicken Sie auf Nächste Frage , um die folgende Frage anzuzeigen. Dadurch wird die im Controller definierte nextQuestion-Funktion ausgelöst.
Anfordern der nächsten Frage
Die nächste Frage sollte angezeigt werden. Antworten Sie weiterhin so oft wie gewünscht auf Fragen. Nachdem Sie alle Fragen abgeschlossen haben, sollten Sie zur ersten Frage zurückkehren.
Nächste Frage
Zurück zu Visual Studio, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden.
Aufgabe 3: Erstellen einer Flip-Animation mithilfe von CSS3
In dieser Aufgabe verwenden Sie CSS3-Eigenschaften, um umfangreiche Animationen auszuführen, indem Sie einen Flip-Effekt hinzufügen, wenn eine Frage beantwortet wird und wenn die nächste Frage abgerufen wird.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Inhalt des GeekQuiz-Projekts, und wählen Sie Hinzufügen | Vorhandenes Element....
Hinzufügen eines vorhandenen Elements zum Ordner "Inhalt"
Navigieren Sie im Dialogfeld Vorhandenes Element hinzufügen zum Ordner Quelle/Objekte , und wählen Sie Flip.css aus. Klicken Sie auf Hinzufügen.
Hinzufügen der Flip.css-Datei aus Assets
Öffnen Sie die soeben hinzugefügte Flip.css-Datei , und überprüfen Sie deren Inhalt.
Suchen Sie den Transformationskommentar zum Kippen . In den formaten unten, in denen der Kommentar ausgeführt wird, wird die CSS-Perspektive verwendet und die Transformationen gedreht, um den Effekt "Karte Flip" zu generieren.
/* flip transformation */ .flip-container div.front { -moz-transform: perspective(2000px) rotateY(0deg); -webkit-transform: perspective(2000px) rotateY(0deg); -o-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); } .flip-container div.front.flip { -moz-transform: perspective(2000px) rotateY(179.9deg); -webkit-transform: perspective(2000px) rotateY(179.9deg); -o-transform: perspective(2000px) rotateY(179.9deg); transform: perspective(2000px) rotateY(179.9deg); } .flip-container div.back { -moz-transform: perspective(2000px) rotateY(-180deg); -webkit-transform: perspective(2000px) rotateY(-180deg); -o-transform: perspective(2000px) rotateY(-180deg); transform: perspective(2000px) rotateY(-180deg); } .flip-container div.back.flip { -moz-transform: perspective(2000px) rotateY(0deg); -webkit-transform: perspective(2000px) rotateY(0deg); -ms-transform: perspective(2000px) rotateY(0); -o-transform: perspective(2000px) rotateY(0); transform: perspective(2000px) rotateY(0); }Suchen Sie das Ausblenden des Bereichs während des Flipkommentars . Der folgende Stil, der den Kommentar enthält, blendet die Rückseite der Gesichter aus, wenn sie vom Viewer abgewandt sind, indem die CSS-Eigenschaft backface-visibility auf ausgeblendet festgelegt wird.
/* hide back of pane during flip */ .front, .back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }Öffnen Sie die Datei BundleConfig.cs im Ordner App_Start , und fügen Sie den Verweis auf die Flip.css-Datei im Formatpaket "~/Content/css" hinzu.
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/Flip.css"));Drücken Sie F5 , um die Lösung auszuführen, und melden Sie sich mit Ihren Anmeldeinformationen an.
Beantworten Sie eine Frage, indem Sie auf eine der Optionen klicken. Beachten Sie den Flip-Effekt beim Übergang zwischen Ansichten.
Beantworten einer Frage mit dem Flip-Effekt
Klicken Sie auf Nächste Frage , um die folgende Frage abzurufen. Der Flip-Effekt sollte erneut angezeigt werden.
Abrufen der folgenden Frage mit dem Flip-Effekt
Zusammenfassung
Durch die Durchführung dieses praktischen Labs haben Sie folgendes gelernt:
- Erstellen eines ASP.NET-Web-API-Controllers mithilfe von ASP.NET Gerüstbau
- Implementieren einer Web-API-Get-Aktion zum Abrufen der nächsten Quizfrage
- Implementieren einer Web-API-Postaktion zum Speichern der Quizantworten
- Installieren von AngularJS über die Visual Studio-Paket-Manager-Konsole
- Implementieren von AngularJS-Vorlagen und -Controllern
- Verwenden von CSS3-Übergängen zum Ausführen von Animationseffekten