| uid | web-api/overview/data/using-web-api-with-entity-framework/part-8 |
|---|---|
| title | Display Item Details | Microsoft Docs |
| author | Rick-Anderson |
| description | Describes how to add the view details functionality for every book listed in the book service application. |
| ms.author | tdykstra |
| ms.date | 06/16/2014 |
| ms.assetid | 75ef94b1-bbec-4681-9210-452dba816144 |
| msc.legacyurl | /web-api/overview/data/using-web-api-with-entity-framework/part-8 |
| msc.type | authoredcontent |
In this section, you will add the ability to view details for each book. In app.js, add to the following code to the view model:
[!code-javascriptMain]
In Views/Home/Index.cshtml, add a data-bind element to the Details link:
[!code-htmlMain]
This binds the click handler for the <a> element to the getBookDetail function on the view model.
In the same file, replace the following mark-up:
[!code-htmlMain]
with this:
[!code-htmlMain]
This markup creates a table that is data-bound to the properties of the detail observable in the view model.
The "<!-- ko -->" syntax lets you include a Knockout binding outside of a DOM element. In this case, the if binding causes this section of markup to be displayed only when details is non-null.
[!code-htmlMain]
Now if you run the app and click one of the "Detail" links, the app will display the book details.
