Web API Series Tutorial 3.7-Combat: Working with data (creating a UI view)

In this section, you will begin to define HTML for your app and add data bindings between the HTML and view models.

Open the views/home/index.cshtml file. Replace all the contents of the file with the following code.

@section scripts {@Scripts. Render ("~/bundles/app")}<div class="Page-header">  <H1>Bookservice</H1></div><div class="Row">  <div class="col-md-4">    <div class="Panel panel-default">      <div class="panel-heading">        <h2 class="Panel-title">Books</H2>      </div>      <div class="Panel-body">        <ul class="list-unstyled" data-bind="Foreach:books">          <li>            <strong><span data-bind="Text:authorname"></span></Strong>:<span data-bind="Text:title"></span>            <small><a href="#">Details</a></Small>          </li>        </ul>      </div>    </div>    <div class="alert Alert-danger" data-bind="Visible:error"> <p data-bind="Text:error"></P></div>  </div>  <div class="col-md-4">    <!--todo:book details --  </div>  <div class="col-md-4">    <!--todo:add New Book--  </div></div>

Most of the DIV elements here are bootstrap style, which is an important element with data binding properties. This element links HTML to the view model.

For example:

<data-bind="text: error">

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

self.error = ko.observable(); 

Whenever a new value is modified to error, knockout updates the text on the < p > element.

The foreach binding tells knockout to iterate through the books array. For each item of the array, knockout creates a new < li > element. Binds the context of a foreach reference to each item of an array. For example:

<span data-bind="text: Author"></span>

Here is a text binding that reads the Author property of each book.

If you run the application now, it will look like this:

After the page is loaded, the books list is loaded asynchronously. Now, the Details link is not yet functional. We'll add this feature to it in the next section.

Web API Series Tutorial 3.7-Combat: Working with data (creating a UI view)