C-Sharpcorner - Latest Articles: ASP.Net MVC 5 Web API Consuming at Client Side

Hello Friends, In this article I am talking about Consuming WEB API Service at client side with Asp.Net MVC 5 application template, using different client side JavaScript libraries.
As I am assuming that people are already familiar with Web API service I am not discussion that in this article. This article is based on step by step learning and divided in to following steps.

• Part 1: Creating database and table using code first migrations and exposing it through Web API 2 Service
• Part 2: Accessing data at client side using AJAX Client template
• Part 3: Accessing data at client side using Angular-JS

Part 1: Creating database and table using code first migrations and exposing it through Web API 2 Service
First I have created new ASP.Net application in visual studio 2013 and then selected MVC template.





Now I am almost ready with my Entity so for code first migrations I am going to enable that like this.








So now once we got database and tables we will deal with controller but I am not going to use normal MVC controller but Web API controller which will expose data in JSON or XML.







Now next step is we will try to expose data with the help of VideoController we have created.

 
Part 2: Accessing data at client side using AJAX Client template

In this part we are trying to consume JSON data at client side which is exposed by our Web API service in Part 1. First I have created some new css classes in my Site.css file which is inside Content folder of my project. These css files I am going to use in html based UI in following steps.

Now before we move forward we need to download few JavaScript libraries for AJAX client template, so for that open google and search for this word "AjaxClientTemplate Preview6". When you do this you will get link of Codeplex website which will give you number of JavaScript file inside a folder with the name "MicrosoftAjax"


Now we are almost ready to deal with AJAX client template so I have open my About.cshtml page which is inside Views/Home and changed content of that to following.


As you can see I have added references of my css and js files which are required in my code.

1. I have applied "sys-template" css class to TBODY so this will be not visible until we have data binded with that.
2. I have added xml namespace of my main class of Microsoft AJAX in my BODY tag so that I can use it. And I am using it to use command which will do partial event fire for selection of my table row.
3. "sys:command" is having pre-defined command "select" which Is something like selection

Now once you are done with this please have a look at my next code of SCRIPT tag which I have done to bind my Web API service data with my HTML table row.

Above code is using $[Jquery] method to get data from Web API and I am creating simple JavaScript function which will deal with my data which I am getting from that.
I have used Sys.create.dataView AJAX methods to create template kind of thing for my TR so that it will generate number of rows at runtime based on my records. Also I have applied some css properties to give proper look and feel.
Finally in this code set_data is a method which is binding my data with my dataView.


If you are getting this then now I want something like details view below this data which will work on my selection of record.


As you can see I have done same kind of binding and used same field to deal with.


This time I have created template for details section and I have used bind method to bind data of my detailsView to my selected Data of my tableView.

Part 3: Accessing data at client side using Angular-JS

In this part we are trying to consume JSON data at client side which is exposed by our Web API service in Part 1.
But this time I am going to use angular-JS for that.
First I want you to download angular.js from angularjs   and paste in script folder of project like this.

This time I am going to use Contact.cshtml page for my UI. So open Contact.cshtml and remove everything from that.






I want you to create page body like above in which I am having simple thead with some headers and I have created tbody with javascript binding for my table fields.


Once you are done with this if you run you will get above output.






Now In my above code I have created some more filters in which I am doing orderby based on another ng-model.


Even though I am working as a corporate trainer from couple of years I am not habited with article writing. Still for knowledge sharing I have done this I hope you will like this.