Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Web Camps Team
Download Web Camps Training Kit
In dieser praktischen Übung wird gezeigt, wie Sie eine Single Page Application (SPA) mit ASP.NET Web-API erstellen und Angular.js für ASP.NET 4.x.
In diesem Handlabor 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 umfangreiche und reaktionsfähige UI mit AngularJS- und CSS3-Transformationseffekten.
In herkömmlichen Webanwendungen initiiert der Client (Browser) die Kommunikation mit dem Server durch Anfordern einer Seite. Der Server verarbeitet dann die Anforderung und sendet den HTML-Code der Seite an den Client. Bei 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 Fluss wird erneut gestartet: Der Server verarbeitet die Anforderung und sendet als Reaktion auf die vom Client angeforderte neue Aktion eine neue Seite an den Browser.
In Single-Page Anwendungen (SPAs) wird die gesamte Seite nach der anfänglichen Anforderung im Browser geladen, aber nachfolgende Interaktionen erfolgen über Ajax-Anforderungen. Dies bedeutet, dass der Browser nur den Teil der Seite aktualisieren muss, der geändert wurde; es ist nicht erforderlich, die gesamte Seite neu zu laden. Der SPA-Ansatz reduziert die Von der Anwendung ergriffene Zeit, um auf Benutzeraktionen zu reagieren, was zu einer flüssigeren Erfahrung führt.
Die Architektur eines SPA umfasst bestimmte Herausforderungen, die in herkömmlichen Webanwendungen nicht vorhanden sind. Neue Technologien wie ASP.NET Web-API, JavaScript-Frameworks wie AngularJS und neue Formatierungsfeatures von CSS3 erleichtern das Entwerfen und Erstellen von SPAs.
Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, verfügbar unter https://aka.ms/webcamps-training-kit.
Übersicht
Ziele
In dieser praktischen Übung erfahren Sie, wie Sie:
- 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
Für die Durchführung dieser praktischen Laborübungen ist Folgendes erforderlich:
- Visual Studio Express 2013 für Web oder höher
Konfiguration
Um die Übungen in diesem praktischen Labor ausführen zu können, müssen Sie zuerst Ihre Umgebung einrichten.
- Öffnen Sie den Windows-Explorer, und navigieren Sie zum Quellordner des Labors.
- Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie "Als Administrator ausführen " aus, um den Setupvorgang zu starten, der Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für diese Übung installiert.
- 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 Labor überprüft haben, bevor Sie die Einrichtung ausführen.
Verwendung von Code-Snippets
Im gesamten Lab-Dokument werden Sie angewiesen, Codeblöcke einzufügen. Aus Gründen der Einfachheit wird der großteil dieses Codes als Visual Studio Code Snippets bereitgestellt, auf die Sie in Visual Studio 2013 zugreifen können, um zu vermeiden, dass Sie ihn manuell hinzufügen müssen.
Hinweis
Jede Übung wird von einer Startlösung begleitet, die sich im Ordner " Anfang " der Übung befindet, mit der Sie jede Übung unabhängig von den anderen ausführen können. Bitte beachten Sie, dass die Codeausschnitte, die während einer Übung hinzugefügt werden, von diesen Startlösungen fehlen und möglicherweise erst funktionieren, wenn Sie die Übung abgeschlossen haben. Innerhalb des Quellcodes für eine Übung finden Sie auch einen Endordner mit einer Visual Studio-Lösung mit dem Code, der aus dem Ausführen der Schritte in der entsprechenden Übung resultiert. Sie können diese Lösungen als Anleitung verwenden, wenn Sie zusätzliche Hilfe benötigen, während Sie diese praktische Übung durcharbeiten.
Übungen
Dieses praktische Labor umfasst die folgenden Übungen:
Geschätzte Zeit zum Abschließen dieses Labors: 60 Minuten
Hinweis
Wenn Sie Visual Studio zum ersten Mal starten, müssen Sie eine der vordefinierten Einstellungssammlungen auswählen. Jede vordefinierte Auflistung ist so konzipiert, dass sie einem bestimmten Entwicklungsstil entspricht und Fensterlayouts, Editorverhalten, IntelliSense-Codeausschnitte und Dialogfeldoptionen bestimmt. In den Vorgängen in diesem Lab werden die Aktionen beschrieben, die erforderlich sind, um eine bestimmte Aufgabe in Visual Studio bei Verwendung der Kollektion "Allgemeine Entwicklungseinstellungen" auszuführen. 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 Dienstebene. Es ist für die Verarbeitung der ajax-Aufrufe verantwortlich, die von der Benutzeroberfläche gesendet werden, und das Zurückgeben von Daten als Reaktion auf diesen Aufruf. 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 ist so konzipiert, dass es einfach ist, HTTP-Dienste zu implementieren, in der Regel JSON- oder XML-formatierte Daten über eine RESTful-API zu senden und zu empfangen. In dieser Übung erstellen Sie die Website zum Hosten der Geek Quiz-Anwendung und implementieren dann den Back-End-Dienst, um die Quizdaten mithilfe ASP.NET Web-API verfügbar zu machen und beizubehalten.
Aufgabe 1 – Erstellen des anfangsprojekts 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 im Lieferumfang von Visual Studio enthalten ist. Eine ASP.NET vereint alle ASP.NET Technologien und bietet Ihnen die Möglichkeit, sie nach Wunsch 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
Im Dialogfeld Neues Projekt wählen Sie ASP.NET-Webanwendung unter der Visual C# | Web-Registerkarte aus. Stellen Sie sicher, dass .NET Framework 4.5 ausgewählt ist, benennen Sie es GeekQuiz, wählen Sie einen Speicherort aus und klicken Sie auf OK.
Erstellen eines neuen ASP.NET Webanwendungsprojekts
Wählen Sie im Dialogfeld "Neues ASP.NET Projekt " die MVC-Vorlage und dann die Web-API-Option 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 im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Modelle " des Projekts "GeekQuiz ", und wählen Sie "Hinzufügen" | aus. Vorhandenes Element....
Hinzufügen eines vorhandenen Elements
Navigieren Sie im Dialogfeld " Vorhandenes Element hinzufügen " zum Ordner " Source/Assets/Models ", und wählen Sie alle Dateien aus. Klicken Sie auf Hinzufügen.
Hinzufügen der Modellressourcen
Hinweis
Indem Sie diese Dateien hinzufügen, 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 objektrelationaler Mapper (ORM), mit dem Sie Datenzugriffsanwendungen erstellen können, indem Sie ein konzeptionelles Anwendungsmodell programmieren, anstatt direkt mit einem relationalen Speicherschema zu programmieren. Weitere Informationen zu Entity Framework finden Sie hier.
Es folgt eine Beschreibung der soeben hinzugefügten Klassen:
- TriviaOption: stellt eine einzelne Option dar, die einer Quizfrage zugeordnet ist.
- TriviaQuestion: stellt eine Quizfrage dar und macht die zugehörigen Optionen über die Options-Eigenschaft verfügbar.
- TriviaAnswer: stellt die vom Benutzer ausgewählte Option als Reaktion auf eine Quizfrage dar.
- TriviaContext: stellt den Datenbankkontext von Entity Framework der Geek Quiz-Anwendung dar. Diese Klasse wird von DContext abgeleitet und macht DbSet-Eigenschaften verfügbar, die Sammlungen der oben beschriebenen Entitäten darstellen.
- TriviaDatabaseInitializer: die Implementierung des Entity Framework-Initializers 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, indem die in der Seed-Methode angegebenen Entitäten eingefügt werden.
Öffnen Sie die datei Global.asax.cs , und fügen Sie die folgende using-Anweisung hinzu.
using GeekQuiz.Models;Fügen Sie den folgenden Code am Anfang der Application_Start-Methode hinzu, um den 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 dazu die HomeController.cs Datei im Ordner "Controller", und fügen Sie der Definition der HomeController-Klasse das Attribut "Authorize" 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, wird der HTTP-Statuscode 401 (Nicht autorisiert) zurückgegeben, ohne die Aktion aufzurufen. Sie können den Filter global, auf Controllerebene oder auf ebene einzelner Aktionen anwenden.
Jetzt passen Sie das Layout der Webseiten und des Brandings an. Öffnen Sie dazu die Datei _Layout.cshtml in den Ansichten | Freigegebener Ordner und Aktualisieren des Inhalts des <Titelelements> durch Ersetzen von My ASP.NET Application durch Geek Quiz.
<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 "Wiedergeben" 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 "Meine ASP.NET Anwendung 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 Gerüsttools, um die Basislinie für die Web-API-Controllerklasse zu erstellen.
Öffnen Sie die WebApiConfig.cs Datei 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 am Anfang der Datei die folgende using-Anweisung hinzu.
using Newtonsoft.Json.Serialization;Fügen Sie der Register-Methode den folgenden hervorgehobenen Code hinzu, um den Formatierer für die JSON-Daten, die von den Web-API-Aktionsmethoden abgerufen werden, 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
Die CamelCasePropertyNamesContractResolver konvertiert automatisch Eigenschaftsnamen in CamelCase, was die allgemeine Konvention für Eigenschaftsnamen in JavaScript ist.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Controller" des Projekts "GeekQuiz ", und wählen Sie "Hinzufügen" | aus. 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 den Web-API 2-Controller – Leere Vorlage im mittleren Bereich aus, und klicken Sie auf "Hinzufügen".
" Auswählen der leeren Vorlage für Web-API 2-Controller
Hinweis
ASP.NET Gerüst 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 zum Entwickeln von Standarddatenvorgängen erforderliche Zeit zu reduzieren.
Der Gerüstprozess stellt außerdem sicher, dass alle erforderlichen Abhängigkeiten im Projekt installiert sind. Wenn Sie beispielsweise mit einem leeren ASP.NET Projekt beginnen und dann ein Gerüst verwenden, um einen Web-API-Controller hinzuzufügen, werden die erforderlichen Web-API-NuGet-Pakete und -Verweise automatisch zu Ihrem Projekt 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 TriviaController.cs Datei wird dann dem Ordner "Controller" des GeekQuiz-Projekts hinzugefügt, das 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 den folgenden Code am Anfang der TriviaController-Klasse hinzu, um die TriviaContext-Instanz im Controller zu definieren, zu initialisieren und zu löschen.
(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-Instanz auf, wodurch sichergestellt wird, dass alle vom Kontextobjekt verwendeten Ressourcen freigegeben werden, wenn die TriviaContext-Instanz verworfen oder automatisch durch die Speicherbereinigung entsorgt wird. Dazu gehört das Schließen aller Datenbankverbindungen, die von Entity Framework geöffnet wurden.
Fügen Sie die folgende Hilfsmethode am Ende der TriviaController-Klasse 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 die folgende Hilfsmethode am Ende der TriviaController-Klasse hinzu. Diese Methode speichert die angegebene Antwort in der Datenbank und gibt einen booleschen Wert zurück, der angibt, ob die Antwort korrekt ist.
(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-Aktionsmethode hinzu. Diese Aktionsmethode ordnet die Antwort dem authentifizierten Benutzer zu und ruft die StoreAsync-Hilfsmethode auf. Anschließend sendet sie eine Antwort mit dem booleschen Wert, 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 das Authorize-Attribut zur Definition der TriviaController-Klasse hinzufügen.
[Authorize] public class TriviaController : ApiController { ... }
Aufgabe 3 – Ausführen der Lösung
Bei dieser Aufgabe überprüfen Sie, ob der in der vorherigen Aufgabe integrierte Webdienst wie erwartet funktioniert. Sie verwenden die Internet Explorer F12-Entwicklertools , um den Netzwerkdatenverkehr zu erfassen und die vollständige Antwort vom Webdienst zu überprüfen.
Hinweis
Stellen Sie sicher, dass Internet Explorer in der Schaltfläche "Start " auf der Visual Studio-Symbolleiste ausgewählt ist.
Drücken Sie F5 , um die Lösung auszuführen. Die Anmeldeseite sollte im Browser angezeigt werden.
Hinweis
Wenn die Anwendung gestartet wird, 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 mit dem Authorize-Attribut in Übung 1 versehen haben), und es ist noch kein Benutzer authentifiziert, leitet die Anwendung die ursprüngliche Anforderung an die Anmeldeseite weiter.
Ausführen der Lösung
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 umgeleitet.
Der 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 Pfeiltaste, um mit der Erfassung des Netzwerkdatenverkehrs zu beginnen.
Initiieren der Web-API-Netzwerkerfassung
Fügen Sie api/trivia an die URL in der Adressleiste des Browsers an. Sie werden nun die Details der Antwort aus der Get-Aktion-Methode in TriviaController überprüfen.
Abrufen der nächsten Fragedaten über die Web-API
Hinweis
Sobald der Download abgeschlossen ist, werden Sie aufgefordert, eine Aktion mit der heruntergeladenen Datei vorzunehmen. Lassen Sie das Dialogfeld geöffnet, um den Antwortinhalt über das Entwicklertoolfenster anzeigen zu können.
Überprüfen Sie jetzt den Inhalt der Antwort. Klicken Sie hierzu auf die Registerkarte "Details " und dann auf " Antworttext". Sie können überprüfen, ob es sich bei den heruntergeladenen Daten um ein Objekt mit den Eigenschaftenoptionen (eine Liste von TriviaOption-Objekten ) handelt, id und Titel , die der TriviaQuestion-Klasse entsprechen.
Anzeigen des Web-API-Antworttexts
Wechseln Sie 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 zunächst den Front-End-Teil des Geek Quiz, wobei Sie sich auf die Interaktion der Single-Page-Application mit AngularJS konzentrieren. Anschließend verbessern Sie die Benutzererfahrung 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
Bei dieser Aufgabe verwenden Sie AngularJS , um die Clientseite der Geek Quiz-Anwendung zu implementieren. AngularJS ist ein Open-Source-JavaScript-Framework, das browserbasierte Anwendungen mit der MVC-Funktion (Model-View-Controller ) erweitert und sowohl die Entwicklung als auch das Testen 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 des AngularJS-Vorlagenmoduls 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 GeekQuiz.sln Projektmappe, die sich im Ordner "Source/Ex2-CreatingASPAInterface/Begin " befindet. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.
Öffnen Sie die Paket-Manager-Konsole über Tools>NuGet-Paket-Manager. Geben Sie den folgenden Befehl ein, um das AngularJS.Core NuGet-Paket zu installieren.
Install-Package AngularJS.CoreKlicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Skripts" des GeekQuiz-Projekts , und wählen Sie "Hinzufügen" | aus. Neuer Ordner. Benennen Sie den Ordner app und drücken die Eingabetaste.
Klicken Sie mit der rechten Maustaste auf den soeben erstellten App-Ordner , und wählen Sie "Hinzufügen" | aus. JavaScript-Datei.
Erstellen einer neuen JavaScript-Datei
Geben Sie im Dialogfeld " Namen für Element angeben " den Quizcontroller in das Textfeld " Elementname " ein, und klicken Sie auf "OK".
Benennen der neuen JavaScript-Datei
Fügen Sie in der quiz-controller.js-Datei den folgenden Code hinzu, um den AngularJS-Controller QuizCtrl 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 werden bei der Registrierung des Controllers für die Vorlage zugänglich sein.
Der QuizCtrl-Controller wird innerhalb eines Moduls namens QuizApp definiert. Module sind Arbeitseinheiten, mit denen Sie Ihre Anwendung in separate Komponenten unterteilen können. Die Hauptvorteile der Verwendung von Modulen sind, dass der Code einfacher zu verstehen ist und dies die Durchführung von Modul-Tests, die Wiederverwendbarkeit und die Wartungsfreundlichkeit erleichtert.
Sie fügen nun dem Gültigkeitsbereich ein 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. wenn die Antwort korrekt ist oder nicht – im $scope-Objekt .
Die nextQuestion - und sendAnswer-Funktionen von oben verwenden das AngularJS -$http-Objekt , um die Kommunikation mit der Web-API über das XMLHttpRequest JavaScript-Objekt aus dem Browser 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 allgemeine Verhaltensweisen bereitstellen, ohne mit dem $http-Objekt interagieren zu müssen. Erwägen Sie die Verwendung des $resource-Objekts in Szenarien, in denen das CRUD-Modell erforderlich ist (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 dazu die Datei Index.cshtml im Ordner Views | Home 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 der Benutzer im Browser sieht. Im Folgenden finden Sie Beispiele für AngularJS-Elemente und Elementattribute, die in einer Vorlage verwendet werden können:
- Die ng-App-Direktive weist AngularJS das DOM-Element an, das das Stammelement der Anwendung darstellt.
- Die ng-Controller-Direktive fügt an der Stelle, an der die Direktive deklariert wird, einen Controller an das DOM an.
- Die geschweifte Klammernnotation {{ }} zeigt Bindungen an die Bereichseigenschaften an, die im Controller definiert sind.
- Die ng-Click-Direktive wird verwendet, um die im Bereich definierten Funktionen als Reaktion auf Benutzerklicks aufzurufen.
Öffnen Sie die Site.css Datei im Inhaltsordner , und fügen Sie am Ende der Datei die folgenden hervorgehobenen Formatvorlagen hinzu, um ein Erscheinungsbild für die Prüfungsansicht bereitzustellen.
(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
Bei dieser Aufgabe führen Sie die Lösung mit der neuen Benutzeroberfläche aus, die Sie mit AngularJS erstellt haben, um einige der Quizfragen zu beantworten.
Drücken Sie F5 , um die Lösung 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 nextQuestion-Funktion ausgelöst, die im Controller definiert ist.
Anfordern der nächsten Frage
Die nächste Frage sollte angezeigt werden. Antworten Sie weiterhin so oft wie gewünscht auf Fragen. Nach Abschluss aller Fragen sollten Sie zur ersten Frage zurückkehren.
Nächste Frage
Wechseln Sie zurück zu Visual Studio, und drücken Sie UMSCHALT+F5 , um das Debuggen zu beenden.
Aufgabe 3 – Erstellen einer Flip-Animation mit 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 wann die nächste Frage abgerufen wird.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Inhaltsordner des GeekQuiz-Projekts , und wählen Sie "Hinzufügen" | aus. Vorhandenes Element....
Hinzufügen eines vorhandenen Elements zum Inhaltsordner
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 Flip.css Datei, die Sie soeben hinzugefügt haben, und prüfen Sie dessen Inhalt.
Suchen Sie den Kommentar zur Flip-Transformation. Die folgenden Formatvorlagen verwenden die CSS-Perspektive und rotateY-Transformationen, um einen "Card Flip"-Effekt 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 Flip-Kommentars . Die folgende Formatvorlage, die den Kommentar enthält, blendet die Rückseite der Gesichter aus, wenn sie dem Betrachter gegenüber stehen, 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 BundleConfig.cs Datei 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 sich mit Ihren Anmeldeinformationen anzumelden.
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 dieser praktischen Übung haben Sie folgendes gelernt:
- Erstellen eines ASP.NET Web-API-Controllers mit ASP.NET Gerüst
- Implementieren einer Web-API-Get-Aktion, um die nächste Quizfrage abzurufen.
- Implementieren einer Web-API-POST-Aktion zum Speichern der Quiz-Antworten
- Installieren von AngularJS über die Visual Studio Package Manager-Konsole
- Implementieren von AngularJS-Vorlagen und -Controllern
- Verwenden von CSS3-Übergängen zum Ausführen von Animationseffekten