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 Mads Kristensen
Die Brise/Knockout MVC-Vorlage wurde von Ward Bell geschrieben
Sie haben von "Single Page Application" (SPA) gehört und sich gefragt, was es ist. Während Sie darüber lesen könnten, würden Sie es lieber für sich selbst erleben. Aber wer hat Zeit, ein Beispiel herunterzuladen? Wenn Sie Über Visual Studio verfügen, haben Sie ein Beispiel FÜR SPA in weniger als 60 Sekunden mit der Vorlage ASP.NET MVC 4 "Breeze/Knockout Single Page Application".
Was ist die Breeze/Knockout SPA-Vorlage?
Die meisten Projektvorlagen erzeugen ein Anwendungsskelett. Sie legen Fleisch auf diese Knochen, indem Sie Ihren Code hinzufügen und schließlich eine funktionierende Anwendung liefern. Die Vorlage Brise/Knockout SPA ist anders. Es generiert eine Beispielanwendung, die Sie studieren können. Es veranschaulicht ein SPA-Anwendungsdesign und viele der Techniken zum Erstellen eines SPA.
Die Vorlage "Breeze/Knockout" ist eine Variante der KnockoutJS SPA-Vorlage , die im Update ASP.NET und WebTools 2012.2 enthalten ist. Die Brise SPA-Vorlage generiert eine Anwendung mit der gleichen Benutzeroberfläche, hat jedoch eine andere Implementierung, die Brise für die Datenverwaltung verwendet.
Die KnockoutJS SPA-Vorlage macht Dienstanforderungen mit unformatiertem jQuery AJAX, die für eine einfache Anwendung geeignet ist. Anspruchsvollere Apps weisen jedoch anspruchsvollere Datenverwaltungsanforderungen auf. Zum Beispiel die meisten Anwendungen:
- Abfragen und erneute Abfrage des Servers während einer erweiterten Benutzersitzung.
- Fügen Sie Abfragefilter, Sortierung und Paging hinzu.
- Teilen Sie dieselben Daten über mehrere Bildschirme hinweg.
- Sammeln Sie Änderungen an vielen Objekten, und speichern Sie sie dann als einzelne Transaktion.
- Überprüfen Sie Änderungen auf dem Client, damit der Benutzer Fehler korrigieren kann, bevor Änderungen an der Datenbank vorgenommen werden.
Die BreezeJS-Bibliothek behandelt diese Aufgaben für Sie und befreit Sie, um die Anwendungslogik und die Benutzerfreundlichkeit zu entwickeln, die am wichtigsten ist.
Breeze ist eine Open Source-Bibliothek zum Erstellen von Rich-Data-Anwendungen in JavaScript und HTML, die Arten von Apps, die historisch als eigenständige Desktopanwendungen bereitgestellt wurden.
Die Vorlage "Breeze/Knockout" hilft Ihnen, diesen ersten wichtigen Schritt in Richtung einer robusteren Datenverwaltungsinfrastruktur zu unternehmen. Es erzeugt eine Beispiel-Todo-Anwendung, die nach außen mit der KnockoutJS SPA-Vorlage identisch ist. Auf der Innenseite ersetzt sie die AJAX-Datenschicht durch Breeze, sodass Sie die beiden Ansätze nebeneinander vergleichen können. Natürlich berührt es kaum das Potenzial einer Breeze-Anwendung. Aber Sie werden sehen, wie Breeze funktioniert und wie wenig erforderlich ist, um diesen Übergang vorzunehmen.
Fangen wir an.
Erstellen eines Breeze/Knockout-Vorlagenprojekts
Laden Sie die Vorlage herunter, und installieren Sie sie, indem Sie oben auf die Schaltfläche "Herunterladen" klicken. Die Vorlage wird als VSIX-Datei (Visual Studio Extension) verpackt. Möglicherweise müssen Sie Visual Studio neu starten.
Wählen Sie im Bereich "Vorlagen " die Option "Installierte Vorlagen " aus, und erweitern Sie den Knoten "Visual C# ". Wählen Sie unter Visual C#"Web" aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt, und klicken Sie auf 'OK'.
Wählen Sie im Assistenten " Neues Projekt " die Option "Breeze Knockout SPA" aus.
Drücken Sie Ctrl-F5, um die Anwendung ohne Debugging zu erstellen und auszuführen, oder drücken Sie F5, um mit dem Debuggen auszuführen.
Wenn die Anwendung zum ersten Mal ausgeführt wird, wird ein Anmeldebildschirm angezeigt. Klicken Sie auf den Link "Registrieren", und eine neue Seite gleitet in die Ansicht, in der Sie einen Benutzernamen und ein Kennwort eingeben können. (Die Anmelde- und Registrierungsseiten werden mit ASP.NET MVC erstellt.) Wenn Sie das Registrierungsformular übermitteln, generiert der Server eine TodoList mit zwei Elementen für Ihr Konto. Dann präsentiert es Ihnen auf einem gelben Zettel.
Jetzt befinden Sie sich im Land der SPA. Alles, was Sie beim Bearbeiten von Todos sehen und erleben, wird mit Hilfe von Knockout und Breeze auf dem Client gerendert und verwaltet. Erkunden Sie die App als Benutzer ... aber mit dem Auge eines Entwicklers. Verwenden Sie die Entwicklertools in Ihrem Browser, um den Netzwerkdatenverkehr zu erfassen. (In Internet Explorer: Drücken Sie F12, wählen Sie die Registerkarte Netzwerk aus, und klicken Sie auf Aufzeichnung starten.) Probieren Sie jetzt Folgendes aus:
- Fügen Sie ein neues Todo-Element hinzu.
- Klicken Sie auf die Beschriftung, und bearbeiten Sie den Titel des Todo-Elements.
- Aktivieren Sie ein Kontrollkästchen, um das Element fertig zu markieren. Beachten Sie, dass das Textfeld deaktiviert ist, sodass der Titel nicht mehr bearbeitet werden kann.
- Klicken Sie rechts neben der Beschriftung auf das "x". Das Element wird ausgeblendet und aus der Datenbank gelöscht.
- Wählen Sie ein anderes Element aus, und löschen Sie den Titel. Sie erhalten einen Validierungsfehler, dass der Titel erforderlich ist. Nach einer kurzen Pause wird der vorherige Titel wiederhergestellt.
- Geben Sie einen lächerlich langen Titel ein. Sie erhalten einen anderen Validierungsfehler, da der Titel zu lang ist.
- Klicken Sie auf die Schaltfläche "Todoliste hinzufügen". Links neben der vorherigen Liste wird eine neue Liste angezeigt.
- Experimentieren Sie mit dem Titel "TodoList", um die erforderlichen und Längenüberprüfungen auszulösen.
- Klicken Sie im Titeltextfeld, um die Fehlermeldung zu löschen.
- Klicken Sie auf das "x" im Kreis in der oberen rechten Ecke, um die TodoList und deren Todos zu löschen.
Die Validierungslogik wird clientseitig von Breeze ausgeführt. Validierungsattribute für die Servermodellklassen werden an den Client weitergegeben und automatisch ausgeführt, bevor der Client den Server kontaktiert.
Überprüfen Sie den Netzwerkdatenverkehr. Beachten Sie, dass beim Erkennen eines Fehlers keine Aufrufe an den Server aufgetreten sind. Jede gültige Änderung führte zu einer POST-Anforderung an "/api/Todo/SaveChanges". Breeze bündelt die Änderungen und sendet sie als einzelne Anforderung an die Methode des SaveChanges Web-API-Controllers. Das unterscheidet sich von der KnockoutJS SPA-Vorlage, die PUT-, POST- und DELETE-Anforderungen für jedes Element einzeln vorgibt.
Einen Blick hineinwerfen
Diese Anwendung verfügt über eine clientseitige und eine Serverseite. Der clientseitige Stapel besteht aus einem kleinen HTML-Code und einer Kombination aus JavaScript-Anwendungsmodulen (im Ordner "App") sowie JavaScript-Bibliotheken von Drittanbietern (im Ordner "Skripts").
Wenn Sie die KnockoutJS SPA-Vorlage untersucht haben, sollte dies sehr vertraut sein. Konzentrieren Sie sich auf die blauen Felder. Die UI-Architektur ist Model-View-ViewModel (MVVM), in dem die HTML-Widgets der Ansicht sauber vom unterstützenden Präsentationscode im Ansichtsmodell getrennt sind. Ein Datenbindungssystem (Knockout in diesem Fall) koordiniert die Ansicht und das Ansichtsmodell, sodass jeder seine Aufgabe ohne intime Kenntnisse der anderen erledigen kann.
Das Modell kapselt die Todo-Daten. Entitäten im Modell werden von Breeze mit Knockout Observable-Eigenschaften erstellt, sodass sie direkt an Widgets in der Ansicht gebunden werden können. Das Ansichtsmodell fordert den Datenkontext auf, die Modellentitäten abzurufen und zu speichern. Der Datenkontext delegiert die meiste Arbeit an Breeze.
Der serverseitige Stapel besteht aus einigen Entwicklercode und drei Prinzipal.NET-Bibliotheken: Web-API, Entity Framework und Breeze.NET.
Die grundlegende Architektur ist identisch mit der KnockoutJS SPA-Vorlage. Die Implementierung ist jedoch viel einfacher: Die DTOs wurden gelöscht, und die meisten Details des Entity Framework wurden an Breeze.NET delegiert.
Nächste Schritte
Wir empfehlen Ihnen, den Code zu erkunden, geführt von der ausführlichen Diskussion über den Client und die Serverstapel auf der Breeze-Website.
Sie können versuchen, mit der clientseitigen Abfrage von Breeze zu spielen; Fügen Sie einige Filter und Sortierungen hinzu. Möglicherweise fügen Sie weitere Modelleigenschaften und mehr Entitäten hinzu, um ein besseres Gefühl für die End-to-End SPA-Entwicklung zu erhalten. Wenn Sie sich des Designs sicher sind, können Sie die Todo-Features ausreißen und durch Ihre eigenen ersetzen.
Bald sind Sie bereit für den nächsten großen Schritt: Hinzufügen von clientseitigen Bildschirmen und Navigieren zwischen ihnen. Sie lassen diese SPA-Vorlage hinter sich und wechseln zu einem vollständigeren SPA-Stack wie von John Papa, das Durandal zum Breeze- und Knockout-Mix hinzufügt.