Skapa JavaScript-klienten

Ladda ned slutfört projekt

I det här avsnittet skapar du klienten för programmet med hjälp av HTML, JavaScript och Knockout.js-biblioteket . Vi skapar klientappen stegvis:

• Visar en lista med böcker.
• Visar bokdetaljer.
• Lägga till en ny bok.

Knockout-biblioteket använder MVVM-mönstret (Model-View-ViewModel):

• Modellen är en representation på serversidan av data i affärsdomänen (i vårt fall böcker och författare).
• Vy är presentationslagret (HTML).
• Vymodellen är ett JavaScript-objekt som innehåller modellerna. Vymodellen är en kodabstraktion av användargränssnittet. Den har ingen kunskap om HTML-representationen. I stället representerar den abstrakta funktioner i vyn, till exempel "en lista över böcker".

Vyn är databunden till vymodellen. Uppdateringar av vymodellen återspeglas automatiskt i vyn. Vymodellen hämtar även händelser från vyn, till exempel knappklick.

Den här metoden gör det enkelt att ändra appens layout och användargränssnitt eftersom du kan ändra bindningarna utan att skriva om någon kod. Du kan till exempel visa en lista med objekt som en <ul>och sedan ändra den senare till en tabell.

Lägg till Knockout-biblioteket

I Visual Studio går du till menyn Verktyg och väljer NuGet Package Manager. Välj sedan Package Manager-konsolen. I fönstret Package Manager Console anger du följande kommando:

Install-Package knockoutjs

Det här kommandot lägger till Knockout-filerna i mappen Skript.

Skapa vymodellen

Lägg till en JavaScript-fil med namnet app.js i mappen Skript. (Högerklicka på mappen Skript i Solution Explorer, välj Lägg till och välj sedan JavaScript-fil.) Klistra in följande kod:

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());

I Knockout observable aktiverar klassen databindning. När innehållet i en observerbar ändras, notifierar den alla databundna kontroller, så att de kan uppdatera sig. (Klassen observableArray är matrisversionen av observerbar.) Till att börja med har vår vymodell två observerbara objekt:

• books innehåller listan över böcker.
• error innehåller ett felmeddelande om ett AJAX-anrop misslyckas.

Metoden getAllBooks gör ett AJAX-anrop för att hämta listan över böcker. Sedan skickas resultatet till matrisen books .

Metoden ko.applyBindings är en del av Knockout-biblioteket. Den tar vymodellen som en parameter och konfigurerar databindningen.

Lägga till ett skriptpaket

Paketering är en funktion i ASP.NET 4.5 som gör det enkelt att kombinera eller paketera flera filer i en enda fil. Paketering minskar antalet begäranden till servern, vilket kan förbättra sidinläsningstiden.

Öppna filen App_Start/BundleConfig.cs. Lägg till följande kod i metoden RegisterBundles.

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

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

FöregåendeNästa