Web API Series Tutorial 3.6-Combat: Working with data (creating JavaScript clients)

In this section, you will create a client for your application using HTML, JavaScript, and the Knockout.js library. We will build the client application as follows:
1, Show Books list
2, show book details
3, add a new book

The Knockout.js library uses the model-view-view model (MVVM) Pattern:
1, the model is the representation of the data on the server side in the business domain (in this case, books and authors).
2, the view is the presentation layer (HTML).
3, the view model is the JavaScript object that sustains the model. The view model is the code abstraction for the UI. It does not have HTML representation, instead it represents a view of an abstract feature, such as a book list.

Views are data-bound to the view model. Updates to the view model are automatically reflected in the view. The view model also gets events from the view, such as the click of a button.

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, you might display a list of items in a UL way, so you can change them to a table.

Add Knockout Library

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

Install-Package knockoutjs

This command adds the knockout file to the Scripts folder.

Create a view model

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

varViewModel = function () {    var  Self= this; Self. Books = Ko.observablearray (); Self. Error = ko.observable ();varBooksuri ='/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 (NewViewModel ());

In knockout, the observable class enables data binding. When the content of observable changes, observable notifies all data-bound controllers, so they are able to update themselves. (whereas the observable class is a observable array version.) Starting with this, our view model has two observable:
1, books Maintain books list.
2, error contains errors if the AJAX call fails

The Getallbooks method generates an Ajax call to get the books list. The results are then added 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 a script Bundle

The bundle is a new feature that appears in ASP. NET 4.5, which makes it easier to combine or wrap multiple files into a single file. Bundles reduce requests to the server, which can improve page load times.

Open the BundleConfig.cs file under 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"));}

Web API Series Tutorial 3.6-Combat: Working with data (creating JavaScript clients)