[Web API series tutorial] 3.6-practice: process data (create a JavaScript client)

[Web API series tutorial] 3.6-practice: process data (create a JavaScript client)

In this section, you will use the HTML, JavaScript, and Knockout. js libraries to create clients for applications. Follow these steps to create a client application:
1. display the books list
2. display detailed information about the book
3. Add a new book

The Knockout. js library uses the Model-View-view model (MVVM) mode:
1. The model represents data on the server in the Business Domain (in this example, books and authors.
2. The view is the presentation layer (HTML ).
3. The view model is a JavaScript Object that maintains the model. The view model is the code abstraction of the UI. It does not have an HTML representation. On the contrary, it represents a view of abstract features, such as a "book list".

The view is bound to the view model by data. The update of the view model is automatically reflected in the view. The view model also obtains events from the view, such as Button clicking.

This implementation makes it easier to modify the layout and UI in your app, because you can change these bindings without any code. For example, if you may display an item list in ul mode, you can change it to a table. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxoMiBpZD0 = "add a knockout library"> Add a Knockout Library

In Visual Studio, click the Tools directory and select Library Package Manager. Select Package Manager Console. In the Package Manager Console, enter the following command:

Install-Package knockoutjs

This command adds the Knockout file to the Scripts folder.

Create a view Model

Add a JavaScript file named app. js under the Scripts folder. (In Solution Explorer, right-click the Scripts folder, select Add, and select JavaScript File .) Paste the following code:

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

In Knockout, the observable class enables data binding. When the content of the observable changes, the observable notifies all data-bound controllers, so they can update themselves. (The observable class is an array version of the observable .) Starting with this, our view model has two observable:
1. books maintains the books list.
2. error contains the error message if the AJAX call fails.

The getAllbooks method generates AJAX calls to obtain the books list. Then add the result to the books array.

The ko. applyBinding method is part of the Knockout library. It uses the view model as a parameter and establishes data binding.

Add Script Bundle

Bundle is a new feature that appears in ASP. NET 4.5. It makes it easier to combine or package multiple files into one file. Bundle reduces requests to the server, which can improve the page loading time.

Open the BundleConfig. cs file in the App_Start folder and add the following code to the RegisterBundles method.

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