Tworzenie klienta JavaScript

Pobieranie ukończonego projektu

W tej sekcji utworzysz klienta dla aplikacji przy użyciu języków HTML, JavaScript i bibliotekiKnockout.js . Utworzymy aplikację kliencka na etapach:

• Wyświetlanie listy książek.
• Wyświetlanie szczegółów książki.
• Dodawanie nowej książki.

Biblioteka Knockout używa wzorca Model-View-ViewModel (MVVM):

• Model jest reprezentacją danych po stronie serwera w domenie biznesowej (w naszym przypadku książki i autorzy).
• Widok jest warstwą prezentacji (HTML).
• Model widoku jest obiektem JavaScript, który przechowuje modele. Model widoku to abstrakcja kodu interfejsu użytkownika. Nie ma wiedzy na temat reprezentacji HTML. Zamiast tego reprezentuje abstrakcyjne cechy widoku, takie jak "lista książek".

Widok jest powiązany z modelem widoku. Aktualizacje modelu widoku są automatycznie odzwierciedlane w widoku. Model widoku pobiera również zdarzenia z widoku, takie jak kliknięcia przycisków.

Takie podejście ułatwia zmianę układu i interfejsu użytkownika aplikacji, ponieważ można zmienić powiązania bez ponownego zapisywania kodu. Na przykład możesz wyświetlić listę elementów jako <ul>, a następnie zmienić ją później na tabelę.

Dodawanie biblioteki Knockout

W programie Visual Studio z menu Narzędzia wybierz pozycję Menedżer pakietów NuGet. Następnie wybierz pozycję Konsola menedżera pakietów. W oknie Konsola menedżera pakietów wprowadź następujące polecenie:

Install-Package knockoutjs

To polecenie dodaje pliki Knockout do folderu Scripts.

Tworzenie modelu widoku

Dodaj plik JavaScript o nazwie app.js do folderu Scripts. (W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder Skrypty, wybierz pozycję Dodaj, a następnie wybierz pozycję Plik JavaScript). Wklej następujący 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());

Knockout, klasa observable umożliwia powiązanie danych. Kiedy zawartość obserwowalnego obiektu ulega zmianie, obiekt ten powiadamia wszystkie kontrolki powiązane z danymi, aby mogły się zaktualizować. (Klasa observableArray jest wersją tablicy obserwowalnej). Na początek nasz model widoku ma dwa obserwowalne elementy:

• books zawiera listę książek.
• error zawiera komunikat o błędzie, jeśli wywołanie AJAX nie powiedzie się.

Metoda getAllBooks wykonuje wywołanie AJAX, aby uzyskać listę książek. Następnie wypycha wynik do tablicy books .

Metoda ko.applyBindings jest częścią biblioteki Knockout. Przyjmuje model widoku jako parametr i konfiguruje powiązanie danych.

Dodawanie pakietu skryptów

Tworzenie pakietów jest funkcją w wersji ASP.NET 4.5, która ułatwia łączenie lub łączenie wielu plików w jeden plik. Tworzenie pakietów zmniejsza liczbę żądań do serwera, co może poprawić czas ładowania strony.

Otwórz plik App_Start/BundleConfig.cs. Dodaj następujący kod do metody RegisterBundles.

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

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