Techbubbles

Invoking Web API using JQuery

HTTP can be used for building the ASP.NET Web APIs that exposes your data and business services. HTTP is simple platform that can reach broad range of clients varying from desktop applications to mobile devices.

What is ASP.NET Web API?

ASP.NET API is a framework for building the RESTful services on top of the .NET Framework. This post outlines the steps to create a web API project in visual studio 2013 and invoking the service using JQuery from client side.

Create the Web API project

Open Visual Studio 2013, create a new project by going to file –> new, select the web application project template and then select WebApi template

clip_image002

Create a datamodel for your project using EntityFramework

clip_image004

The datamodel generated by connecting to the existing database, after generating the EntityDBContext the file looks as follows

clip_image006

This post shows the data from the following model

clip_image008

Add a controller to your project and name it as Employees Controller and write the following code

clip_image010

Now you can call the API controller from HTML page using JQuery. Add an HTML page to your project

clip_image012

JQuery getJSON function sends an AJAX request and the return response contains array of JSON objects. The done function specifies a callback if request is succeeded. When you run your application then you will see something similar to the following screen

clip_image014

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Raju Golla Recent comment authors
  Subscribe  
Notify of
Raju Golla
Guest
Raju Golla

Good one. I acknowledge the fact that you are explaining the concept in simple terms. Thought of sharing a better approach. But getJSON does not provide exception handling i.e., when the service returns 404 or 401 there is no way to capture and output relevant message. ajax function (below) allows better exception handling…. $(document).ready(function () { $.ajax({ type: “GET”, url: “api/employees”, contentType: “application/json; charset=utf-8”, dataType: “json”, success: function (response) { var names = response.d; alert(names); }, failure: function (response) { alert(response.d); } }); });