A JavaScript-ügyfél létrehozása

Befejezett projekt letöltése

Ebben a szakaszban a HTML, a JavaScript és a Knockout.js kódtár használatával hozza létre a kliensoldalt az alkalmazáshoz. Az ügyfélalkalmazást a következő szakaszokban fogjuk létrehozni:

• A könyvek listájának megjelenítése.
• Egy könyv részleteinek megjelenítése.
• Új könyv hozzáadása.

A Knockout-kódtár a Model-View-ViewModel (MVVM) mintát használja:

• A modell az üzleti tartományban lévő adatok kiszolgálóoldali ábrázolása (esetünkben könyvek és szerzők).
• A nézet a bemutató réteg (HTML).
• A nézetmodell egy JavaScript-objektum, amely a modelleket tartalmazza. A nézetmodell a felhasználói felület kód absztrakciója. Nem ismeri a HTML-reprezentációt. Ehelyett a nézet absztrakt funkcióit jeleníti meg, például a "könyvek listáját".

A nézet adathoz kötött a nézetmodellhez. A nézetmodell frissítései automatikusan megjelennek a nézetben. A nézetmodell eseményeket is lekéri a nézetből, például gombkattintásokat.

Az ábra bemutatja a szerveroldali web A P I-t és az ügyfél oldali J S O N modellt, amelyek A J A X segítségével összekapcsolódnak, valamint a nézetmodellt és a H T M L nézetet, amelyek adatközvetítéssel vannak összekötve.

Ezzel a módszerrel egyszerűen módosíthatja az alkalmazás elrendezését és felhasználói felületét, mivel kód újraírása nélkül módosíthatja a kötéseket. Megjelenítheti például az elemek <ul>listáját, majd később táblázattá módosíthatja.

A Knockout könyvtár hozzáadása

A Visual Studióban az Eszközök menüben válassza a NuGet Package Manager lehetőséget. Ezután válassza a Package Manager-konzolt. A Package Manager konzolablakban adja meg a következő parancsot:

Install-Package knockoutjs

Ez a parancs hozzáadja a Knockout-fájlokat a Szkriptek mappához.

A nézetmodell létrehozása

Adjon hozzá egy app.js nevű JavaScript-fájlt a Szkriptek mappához. (A Megoldáskezelőben kattintson a jobb gombbal a Szkriptek mappára, válassza a Hozzáadás, majd a JavaScript-fájl lehetőséget.) Illessze be a következő kódot:

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

A Knockoutban az osztály engedélyezi az observable adatkötést. Ha egy megfigyelhető tartalma megváltozik, a megfigyelhető értesíti az összes adathoz kötött vezérlőt, hogy magukat frissíteni tudják. (Az observableArray osztály a megfigyelhető tömbverzió.) Első lépésként a nézetmodellnek két megfigyelhetője van:

• books a könyvek listáját tartalmazza.
• error hibaüzenetet tartalmaz, ha egy AJAX-hívás meghiúsul.

A getAllBooks metódus AJAX-hívást indít a könyvek listájának lekéréséhez. Ezután leküldi az eredményt a books tömbbe.

A ko.applyBindings metódus a Knockout kódtár része. A nézetmodellt paraméterként használja, és beállítja az adatkötést.

Szkriptköteg hozzáadása

A Bundling a ASP.NET 4.5 egyik funkciója, amely megkönnyíti több fájl egyetlen fájlba való összevonását vagy kötegelését. Az összekapcsolás csökkenti a kiszolgálóra irányuló kérések számát, ami javíthatja az oldalak betöltési idejét.

Nyissa meg a fájlt App_Start/BundleConfig.cs. Adja hozzá a következő kódot a RegisterBundles metódushoz.

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

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

ElőzőKövetkező