Breeze-/Knockout-Vorlage

von Mads Kristensen

Die Breeze/Knockout MVC-Vorlage wurde von Ward Bell geschrieben.

Herunterladen der Breeze/Knockout MVC-Vorlage

Sie haben von "Single Page Application" (SPA) gehört und sich gefragt, was es ist. Obwohl Sie darüber lesen könnten, möchten Sie es lieber für sich selbst erleben. Aber wer hat Zeit, ein Beispiel herunterzuladen? Wenn Sie Visual Studio verwenden, können Sie in weniger als 60 Sekunden eine Beispiel-SPA mit der vorlage ASP.NET MVC 4 "Breeze/Knockout Single Page Application" ausführen.

Was ist die Breeze/Knockout SPA-Vorlage?

Die meisten Projektvorlagen generieren ein Anwendungsgerüst. Sie setzen diese Knochen auf, indem Sie Ihren Code hinzufügen und schließlich eine funktionierende Anwendung bereitstellen. Die Vorlage Breeze/Knockout SPA ist anders. Es generiert eine Beispielanwendung, die Sie untersuchen können. Es veranschaulicht einen SPA-Anwendungsentwurf und viele der Techniken zum Erstellen eines SPA.

Die Vorlage Breeze/Knockout ist eine Variante der KnockoutJS SPA-Vorlage, die im Update ASP.NET and Web Tools 2012.2 enthalten ist. Die Breeze SPA-Vorlage generiert eine Anwendung mit der gleichen Benutzeroberfläche, verfügt aber über eine andere Implementierung, die Breeze für die Datenverwaltung verwendet.

Die KnockoutJS SPA-Vorlage erstellt Dienstanforderungen mit unformatiertem jQuery AJAX, was für eine einfache Anwendung geeignet ist. Komplexere Apps haben jedoch anspruchsvollere Anforderungen an die Datenverwaltung. Die meisten Anwendungen:

• Abfragen und erneute Abfragen des Servers während einer erweiterten Benutzersitzung.
• Fügen Sie Abfragefilter, Sortierung und Paging hinzu.
• Teilen Sie dieselben Daten auf mehreren Bildschirmen.
• 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 Er Änderungen an der Datenbank committen kann.

Die BreezeJS-Bibliothek übernimmt diese Aufgaben für Sie, sodass Sie die Anwendungslogik und benutzererfahrung entwickeln können, die am wichtigsten ist.

Breeze ist eine Open Source Bibliothek zum Erstellen umfangreicher Datenanwendungen in JavaScript und HTML, den Arten von Apps, die in der Vergangenheit als eigenständige Desktopanwendungen bereitgestellt wurden.

Die Vorlage Breeze/Knockout hilft Ihnen dabei, den ersten entscheidenden Schritt in Richtung einer robusteren Datenverwaltungsinfrastruktur zu machen. Es wird eine Todo-Beispielanwendung erzeugt, die nach außen mit der KnockoutJS SPA-Vorlage identisch ist. Im Inneren wird die AJAX-Datenebene durch Breeze ersetzt, sodass Sie die beiden Ansätze nebeneinander vergleichen können. Natürlich berührt es kaum das Potenzial einer Breeze-Anwendung. Sie werden jedoch sehen, wie Breeze funktioniert und wie wenig erforderlich ist, um diesen Übergang zu erreichen.

Fangen wir also 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 Visual Studio-Erweiterungsdatei (VSIX) gepackt. Möglicherweise müssen Sie Visual Studio neu starten.

Wählen Sie im Bereich Vorlagendie Option Installierte Vorlagen aus, und erweitern Sie den Knoten Visual C# . Wählen Sie unter Visual C#die Option Web aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Geben Sie dem Projekt einen Namen, und klicken Sie auf OK.

Wählen Sie im Assistenten Neues Projektdie Option Breeze Knockout SPA aus.

Drücken Sie STRG-F5, um die Anwendung ohne Debuggen zu erstellen und auszuführen, oder drücken Sie F5, um das 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, auf 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 sie Ihnen auf einer gelben Notiz.

Jetzt sind Sie im Land von SPA. Alles, was Sie beim Bearbeiten von Todos sehen und erleben, wird mithilfe 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 Aufnahme starten.) Probieren Sie nun Folgendes aus:

• Fügen Sie ein neues Todo-Element hinzu.
• Klicken Sie auf die Bezeichnung, und bearbeiten Sie den Titel des Todo-Elements.
• Aktivieren Sie ein Kontrollkästchen, um das Element als erledigt zu markieren. Beachten Sie, dass das Textfeld deaktiviert ist, sodass der Titel nicht mehr bearbeitet werden kann.
• Klicken Sie rechts neben der Bezeichnung auf das "x". Das Element wird ausgeblendet und aus der Datenbank gelöscht.
• Wählen Sie ein anderes Element aus, und löschen Sie dessen 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, dass der Titel zu lang ist.
• Klicken Sie auf die Schaltfläche "Aufgabenliste hinzufügen". Links von der vorherigen Liste wird eine neue Liste angezeigt.
• Spielen Sie mit dem TodoList-Titel, und lösen Sie die erforderlichen überprüfungen und die Länge aus.
• Klicken Sie in das Textfeld titel, um die Fehlermeldung zu löschen.
• Klicken Sie auf das "x" im Kreis in der oberen rechten Ecke, um die TodoList und die zugehörigen 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 keine Serveraufrufe aufgetreten sind, als Breeze einen Fehler erkannt hat. 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. Dies unterscheidet sich von der KnockoutJS SPA-Vorlage, die PUT-, POST- und DELETE-Anforderungen für jedes Element einzeln festlegt.

Einsehen in

Diese Anwendung verfügt über eine Client- und eine Serverseite. Der clientseitige Stapel besteht aus einem kleinen HTML-Code und einer Kombination aus JavaScript-Anwendungsmodulen (im Ordner "app") und JavaScript-Bibliotheken von Drittanbietern (im Ordner "Skripts").

Wenn Sie die KnockoutJS SPA-Vorlage untersucht haben, sollte dies sehr vertraut aussehen. Konzentrieren Sie sich auf die blauen Felder. Die Ui-Architektur ist Model-View-ViewModel (MVVM), bei der die HTML-Widgets der Ansicht sauber vom unterstützenden Präsentationscode im Ansichtsmodell getrennt sind. Ein Datenbindungssystem (in diesem Fall Knockout) koordiniert die Ansicht und das Ansichtsmodell, sodass jeder seine Arbeit ohne enge Kenntnis des anderen erledigen kann.

Das Modell kapselt die Todo-Daten. Entitäten im Modell werden von Breeze mit beobachtbaren Knockout-Eigenschaften erstellt, sodass sie direkt an Widgets in der Ansicht gebunden werden können. Das Ansichtsmodell fordert den Datenkontext auf, die Modellentitäten zu erhalten und zu speichern. Der Datenkontext delegiert den Größten Teil der Arbeit an Breeze.

Der serverseitige Stapel besteht aus Entwicklercode und drei prinzipalen .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 Entity Framework-Details wurden an Breeze.NET delegiert.

Nächste Schritte

Wir empfehlen Ihnen, den Code zu erkunden, geleitet von der ausführlichen Diskussion sowohl des Clients als auch der Serverstapel auf der Breeze-Website.

Sie können versuchen, mit der clientseitigen Breeze-Abfrage zu spielen. Fügen Sie einige Filter und Sortierungen hinzu. Sie können weitere Modelleigenschaften und mehr Entitäten hinzufügen, 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 diesen. Sie lassen diese SPA-Vorlage hinter sich und wechseln zu einem vollständigeren SPA-Stapel, z. B John Papa es Hot Towel, das Durandal zur Breeze- und Knockout-Mischung hinzufügt.