[Web API series tutorial] 3.7-practice: process data (create a UI view)

[Web API series tutorial] 3.7-practice: process data (create a UI view)

In this section, you will start to define HTML for the app and add data binding between the HTML and view model.

Open the Views/Home/Index. cshtml file. Use the following code to replace all the content of the file.

<code class=" hljs xml">@section scripts {  @Scripts.Render("~/bundles/app")}  </code>

BookService Books

• : Details

The vast majority of div elements here are in the Bootstrap style, which is an important element of the Data Binding attribute. This element links HTML to the view model.

For example:

In this example, the "text" binding causes the p element to display the error attribute value in the view model. The error callback is declared in ko. obserable:

self.error = ko.observable(); 

Whenever a new value is modified to an error, the Knockout will update the text on the <p> element.

The foreach binding tells Knockout to traverse cyclically in the books array. For each entry of the array, Knockout creates a new <li> element. Bind the context referenced by foreach to each item of the array. For example:

Here there is a text binding to read the Author attribute of each book.

If you run the application now, it looks like this:

After a page is loaded, the books list is asynchronously loaded. Currently, the "Details" link is not functional yet. We will add this feature for it in the next section.