Knockout.js is a client-side Javascript framework for creating single page applications. Central to the framework is the VIewModel. ViewModel represents the model or data for the View. It also has the behavior of the view. Click event handlers are part of the ViewModel.

DOM elements (View) are bound to ViewModel. We create a simple ASP.NET MVC application which displays a DropDown. The DropDown is bound to JSON data coming from the controller.


We will start with the ASP.NET MVC application. The GetTickets action returns the model (List of tickets) as JSON data.


We create the TicketsViewModel. Call the controller to get a list of tickets as JSON. Pass the data to the ViewModel. In Knockout, all properties are observables. When the data within the observable changes, the view gets updated with the new data.

TicketsViewModel has two observable properties, tickets and selectedTicket. ko is a global variable (similar to $ in jQuery).

All Knockout code should be placed at the end of the body tag.

data-bind attribute

Decorate the HTML with data-bind attributes. These data-bind expressions are unique to Knockout. Please refer to the documentation on how to use them.

Finally, place jQuery and Knockout within the head tag.

jQuery is not required for Knockout.js. We used jQuery for making an API call.

Introduction to Knockout.js with ASP.NET MVC
Tagged on: