Vytvoření javascriptového klienta

Stáhnout dokončený projekt

V této části vytvoříte klienta pro aplikaci pomocí HTML, JavaScriptu a knihovny Knockout.js . Aplikaci klienta sestavíme ve fázích:

• Zobrazuje seznam knih.
• Zobrazení podrobností o knize
• Přidání nové knihy

Knihovna Knockout používá vzor model-view-viewmodelu (MVVM):

• Model je reprezentace dat na straně serveru v obchodní doméně (v našem případě knihy a autoři).
• Zobrazení je prezentační vrstva (HTML).
• Model zobrazení je javascriptový objekt, který obsahuje modely. Model zobrazení je abstrakce kódu uživatelského rozhraní. Nemá žádné znalosti o reprezentaci HTML. Místo toho představuje abstraktní funkce zobrazení, například "seznam knih".

Zobrazení je svázané s modelem zobrazení. Aktualizace modelu zobrazení se automaticky projeví v zobrazení. Model zobrazení také získává události ze zobrazení, například kliknutí na tlačítko.

Tento přístup usnadňuje změnu rozložení a uživatelského rozhraní aplikace, protože vazby můžete změnit bez přepsání kódu. Můžete například zobrazit seznam položek jako položku <ul>a později ji změnit na tabulku.

Přidejte knihovnu Knockout

V sadě Visual Studio v nabídce Nástroje vyberte Správce balíčků NuGet. Pak vyberte konzolu Správce balíčků. V okně konzoly Správce balíčků zadejte následující příkaz:

Install-Package knockoutjs

Tento příkaz přidá soubory Knockout do složky Scripts.

Vytvoření modelu zobrazení

Do složky Scripts přidejte soubor JavaScriptu s názvem app.js. (V Průzkumníku řešení klikněte pravým tlačítkem na složku Skripty, vyberte Přidat a pak vyberte JavaScript File.) Vložte následující kód:

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

V Knockoutu observable třída povoluje datovou vazbu. Když se obsah observable objektu změní, tento objekt upozorní všechny ovládací prvky vázané na data, aby se mohly aktualizovat. (Třída observableArray je pole verzí observable.) Na začátku má náš view model dva observables:

• books obsahuje seznam knih.
• error obsahuje chybovou zprávu, pokud volání AJAX selže.

Metoda getAllBooks provádí volání AJAX pro získání seznamu knih. Potom vloží výsledek na books pole.

Metoda ko.applyBindings je součástí knihovny Knockout. Vezme model zobrazení jako parametr a nastaví datovou vazbu.

Přidání sady skriptů

Bundling je funkce v ASP.NET 4,5, která usnadňuje kombinování nebo spojování více souborů do jednoho souboru. Sdružování snižuje počet požadavků na server, což může zlepšit dobu načítání stránky.

Otevřete soubor App_Start/BundleConfig.cs. Do metody RegisterBundles přidejte následující kód.

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

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

PředchozíDalší