Erstellen des JavaScript-Clients

Abgeschlossenes Projekt herunterladen

In diesem Abschnitt erstellen Sie den Client für die Anwendung mit HTML, JavaScript und der Knockout.js-Bibliothek . Wir erstellen die Client-App in Phasen:

• Zeigt eine Liste von Büchern an.
• Details eines Buchs anzeigen.
• Hinzufügen eines neuen Buchs.

Die Knockout-Bibliothek verwendet das Model-View-ViewModel (MVVM)-Muster:

• Das Modell ist die serverseitige Darstellung der Daten in der Geschäftsdomäne (in unserem Fall Bücher und Autoren).
• Die Ansicht ist die Präsentationsebene (HTML).
• Das Ansichtsmodell ist ein JavaScript-Objekt, das die Modelle enthält. Das Ansichtsmodell ist eine Codestraktion der Benutzeroberfläche. Sie hat keine Kenntnisse über die HTML-Darstellung. Stattdessen stellt es abstrakte Features der Ansicht dar, z. B. "eine Liste von Büchern".

Die Ansicht ist datengebunden an das Ansichtsmodell. Aktualisierungen des Ansichtsmodells werden automatisch in der Ansicht wiedergegeben. Das Ansichtsmodell ruft auch Ereignisse aus der Ansicht ab, z. B. Schaltflächenklicks.

Dieser Ansatz erleichtert das Ändern des Layouts und der Benutzeroberfläche Ihrer App, da Sie die Bindungen ändern können, ohne Code neu zu schreiben. Sie können z. B. eine Liste von Elementen als <ul>Element anzeigen und sie später in eine Tabelle ändern.

Füge die Knockout-Bibliothek hinzu

Wählen Sie in Visual Studio im Menü "Extras " die Option "NuGet-Paket-Manager" aus. Wählen Sie dann die Paket-Manager-Konsole aus. Geben Sie im Paket-Manager-Konsolenfenster den folgenden Befehl ein:

Install-Package knockoutjs

Mit diesem Befehl werden die Knockout-Dateien dem Ordner Skripts hinzugefügt.

Erstellen des Ansichtsmodells

Fügen Sie dem Ordner "Skripts" eine JavaScript-Datei namens app.js hinzu. (Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Skripts", wählen Sie "Hinzufügen" und dann "JavaScript-Datei" aus.) Fügen Sie den folgenden Code ein:

var ViewModel = function () {
    var self = this;
    self.books = ko.observableArray();
    self.error = ko.observable();

    var booksUri = '/api/books/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllBooks() {
        ajaxHelper(booksUri, 'GET').done(function (data) {
            self.books(data);
        });
    }

    // Fetch the initial data.
    getAllBooks();
};

ko.applyBindings(new ViewModel());

In Knockout ermöglicht die observable Klasse die Datenbindung. Wenn sich der Inhalt einer feststellbaren Änderung ändert, benachrichtigt die Observable alle datengebundenen Steuerelemente, damit sie sich selbst aktualisieren können. (Die observableArray Klasse ist die Arrayversion von observable.) Zunächst hat unser Ansichtsmodell zwei Observables:

• books enthält die Liste der Bücher.
• error enthält eine Fehlermeldung, wenn ein AJAX-Aufruf fehlschlägt.

Die getAllBooks Methode führt einen AJAX-Aufruf aus, um die Liste der Bücher abzurufen. Anschließend verschiebt es das Ergebnis auf das books Array.

Die ko.applyBindings Methode ist Teil der Knockout-Bibliothek. Es verwendet das Ansichtsmodell als Parameter und richtet die Datenbindung ein.

Hinzufügen eines Skriptbundles

Bündelung ist ein Feature in ASP.NET 4.5, das das Kombinieren oder Bündeln mehrerer Dateien in einer einzelnen Datei erleichtert. Durch die Bündelung wird die Anzahl der Anforderungen an den Server reduziert, wodurch die Seitenladezeit verbessert werden kann.

Öffnen Sie die Datei App_Start/BundleConfig.cs. Fügen Sie der RegisterBundles-Methode den folgenden Code hinzu.

public static void RegisterBundles(BundleCollection bundles)
{
    // ...

    // New code:
    bundles.Add(new ScriptBundle("~/bundles/app").Include(
              "~/Scripts/knockout-{version}.js",
              "~/Scripts/app.js"));
}