Consuming Web API Using jQuery – Part Two

I’m continuing here with my ASP.NET Web API series; you need to follow my first article of ASP.NET Web API.

• Getting Started With ASP.NET Web API – Part One

In the previous article we learned about how we can create a Web API and how to consume it on Fiddler.

In this article of the series, we will see how we can consume our Web API using jQuery. Let’s create an empty ASP.NET web application. Open Visual Studio 2013, go to New and choose Project.

 

Expand Installed > Templates > Visual C# and choose an ASP.NET Web Application from the menu, give a name to your project which you want to and finally click on the “OK” button.

 

So select a template; I’m going to create an empty project, so select empty template from the list of templates. Click on the ok button to create an empty ASP.NET.

 

 

I need to add a web form now for the jQuery code, so right click on the project and add a new item.

 

Select Web Form from the list and give a name to your Web Form, and finally click on the ok button.

 

 

Here in this page I have a button with the value Get Author, because I want to return author and add a jQuery script, and we have a JavaScript button click handler for the button. Write a code of jQuery which will consume the Web API and display the result. Here also we have a $.ajax which we can use to consume our Web API. So the $.ajax has some parameters like url, type, and datatype.

• url - It takes the Web API URL.
• Type - It specifies which method you want to invoke like Get, Post, Put and Delete.
• Datatype - It specifies what kind of format you expect as return.
• Success - It is a call back method which gets a call when the result is returned from Web API, it has a parameter called data. 

In the alert box we simply return our Author name.

One more function is for error; that is responsible for getting data without loading the page.

 

Now, run your previous project (that is explained in Part one of the series). After running it you can put a breakpoint to check the result in both of the methods.

Run this project by simply clicking on F5 and run it ona  different browser as well.

You will get a button click on it; look at the URL and call your Web Form page.

 

Huh, we successfully got our author, because in the url (See Test.aspx page) we gave the first Id, so we got our Author.

 

Let’s try to put the second  id in the URL like this,

url: 'http://localhost:2588/api/Values/2'

 

Now again run this page by pressing F5, make sure your first project is in running mode.

 

 

We got second author as well.

 

So we successfully consumed our Get () method, now I want to consume our previous Get () method which returns a list of authors. I need to put a loop on authors like in the below figure –

 

Now run the project again, and you‘ll get the list of authors. First you’ll get Nitin Pandit.

 

After clicking on the above pop up, you’ll getthe second author as well. 

Thanks for reading this article, stay tuned with us for more on ASP.NET Web API.