Создание клиента JavaScript

Скачивание завершенного проекта

В этом разделе вы создадите клиент для приложения, используя HTML, JavaScript и библиотеку Knockout.js . Мы создадим клиентское приложение на этапах:

• Отображение списка книг.
• Отображение сведений о книге.
• Добавление новой книги.

Библиотека «Knockout» использует паттерн Model-View-ViewModel (MVVM):

• Модель — это серверное представление данных в бизнес-домене (в нашем случае книги и авторы).
• Представление — это слой презентации (HTML).
• Модель представления — это объект JavaScript, содержащий модели. Модель представления — это абстракция кода пользовательского интерфейса. У него нет знаний о представлении HTML. Вместо этого он представляет абстрактные признаки представления, такие как "список книг".

Представление привязано к модели представления. Обновления модели представления автоматически отражаются в представлении. Модель представления также получает события из представления, например нажатия кнопки.

Такой подход упрощает изменение макета и пользовательского интерфейса приложения, так как вы можете изменить привязки без перезаписи кода. Например, можно отобразить список элементов в качестве <ul>элемента, а затем изменить его позже на таблицу.

Добавление библиотеки Knockout

В Visual Studio в меню "Сервис" выберите Диспетчер пакетов NuGet. Затем выберите консоль диспетчера пакетов. В окне консоли диспетчера пакетов введите следующую команду:

Install-Package knockoutjs

Эта команда добавляет файлы Knockout в папку "Скрипты".

Создание модели представления

Добавьте файл JavaScript с именем app.js в папку "Скрипты". (В обозревателе решений щелкните правой кнопкой мыши папку "Скрипты", выберите "Добавить", а затем выберите файл JavaScript.) Вставьте следующий код:

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

В Нокауте observable класс включает привязку данных. Если содержимое наблюдаемого объекта изменяется, он извещает все связанные с данными элементы управления для их обновления. (Класс observableArray является массивной версией наблюдаемого.) Для начала наша модель представления имеет два наблюдаемых объекта:

• books содержит список книг.
• error содержит сообщение об ошибке, если вызов AJAX завершается ошибкой.

Метод getAllBooks вызывает AJAX, чтобы получить список книг. Затем он отправляет результат в books массив.

Метод ko.applyBindings является частью библиотеки Knockout. Она принимает модель представления в качестве параметра и настраивает привязку данных.

Добавление пакета скриптов

Объединение — это функция в ASP.NET 4.5, которая упрощает объединение или объединение нескольких файлов в один файл. Объединение уменьшает количество запросов к серверу, что может улучшить время загрузки страницы.

Откройте файл App_Start/BundleConfig.cs. Добавьте следующий код в метод RegisterBundles.

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

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

НазадДалее