[Web API series tutorial] 3.8-practice: process data (display entry details)

[Web API series tutorial] 3.8-practice: process data (display entry details)

In this section, you will add the function to view details of each book. In app. js, add the following code to the view model:

self.detail = ko.observable();self.getBookDetail = function (item) {    ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {        self.detail(data);    });}

In Views/Home/Index. cshtml, add a data binding element to the Details link:

• : Details

It binds the <a> element to a click event that calls the getBookDetail function in the view model.

In the same file, replace the following code:

<code class=" hljs xml">    <!--{cke_protected}{C}%3C!%2D%2D%20TODO%3A%20Book%20details%20%2D%2D%3E--></code>

To:

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%20ko%20if%3Adetail()%20%2D%2D%3E-->      </code>

Detail

Author
Title
Year
Genre
Price

This Code creates a table bound to the details attributes in the view model.

"

Now, if you run this application and click a "Detail" link, the app will display the details of the book.