Consume Web API OData Service

In my previous post, I have explained about how to create an ASP.Net Web API OData service. In this post I'll explain how to consume that service using Breeze JS. This demo will continue with the project I have created in my previous post.

Install nuget packages for Breeze JS and Data JS.

In the HomeController add a new action method called Demo. After that add a view for that.

In that view, we need to add some java script references.

Now we have to write code for consume the ASP.Net Web API OData Service and bind those data to view. When we write object orient java scripts, we can add namespaces just like C#. In below code the namespace is myNameSpace.

Then we'll configure the breeze EntityManager. EntityManager is the gateway for the service and cached objects. Using the EntityManager we handles the asynchronous communication with services.

Now add a view model java script class which have a property called students and a function called load. This students is an array of student which stores students, retried from the service. This load function is use to load students from the service and add each student to the students array.

Now we have to call that load function and after that we have to enable students property, as a Knockout observable array.

Below is the full java script code that we wrote.

Now we have to design the view page. We are using Knockout bindings for that.

Now run the application and browse to /Home/Demo. You'll see the asynchronously loaded table.