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

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

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

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

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

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

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

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

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

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

Install-Package knockoutjs

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

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

Добавьте файл JavaScript с именем app.js в папку Scripts. (В Обозреватель решений щелкните правой кнопкой мыши папку Скрипты, выберите Добавить, а затем файл 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());

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

• 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"));
}