Post
Ask Question

Understand jQuey Ajax Function: Call Web-API Method

Welcome to the Understand jQuery Ajax Function article series. In previous articles we saw how to call a C# code behind function, Web Service and WCF Service using the jQuery Ajax method. You can read them here.

In this article we will explain a topic that is slighlty more advanced than previous articles. Here we will try to consume a WEB-API service using a jQuery Ajax function. Since this article is not a complete tutorial of the WEB-API, it demands some basic concepts and understanding of the Web-API and it's uses. Try to understand the implementation.

Step 1: Create simple MVC-4 Web API application

To create a WEB-API we need to create one MVC-4 application in Visual Studio. Here is a sample screen to create the MVC application.

MVC4 Application

Choose "MVC 4 Web Application" and proceed. Next you will get the following screen. Here we will choose "WEB-API".

Web API Application

Let's keep the default Razor view engine and proceed. Once the application has been crated you will find a complete nearly empty structure of Web API application. Within the Controller folder you will find a few empty controllers. Here we have chosen the Values controller to demonstrate this simple example. 

Here is our sample controller class. You can see that the controller class is inherited from the ApiController class. Within this controller class we have defined one simple function that can be accessed using the GET verb. This Get() method can be consumed by a jQuery Ajax method.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. namespace TestAPI.Controllers  
  8. {  
  9.     public class ValuesController : ApiController  
  10.     {  
  11.         // GET api/values  
  12.         public String Get()  
  13.         {  
  14.             return "Hello world";  
  15.         }  
  16.     }  
  17. } 

This method is very simple and we are returning a string from here. Now, the Web-API configuration is over and we will create client code to consume it.

Step 2: Create jQuery Ajax method to consume Web-API method

We will create one .aspx page to define a jQuery Ajax method. So, add one Web page in the same solution and put the following code in the HTML view.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Consumer.aspx.cs" Inherits="TestAPI.Consumer" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title></title>  
  6.     <script src="Scripts/jquery-1.7.1.js"></script>  
  7.     <script type="text/javascript">  
  8.             $(document).ready(function () {  
  9.     var url = 'api/Values';  
  10.     $.ajax({  
  11.         url: url,  
  12.         type: 'GET',  
  13.         success: function (result) {  
  14.             var r = JSON.stringify(result);  
  15.             alert("From Web-API  " + r);  
  16.         }  
  17.     });  
  18. });  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">     
  23.     </form>  
  24. </body>  
  25. </html>   

We are consuming the Web-API service via jQuery Ajax function. Try to look at the URL variable that was defined within the head section. We have specified the URL with the following API/Values.

The Values is nothing but the name of the controller class. Here is sample output of the application.

Output of the Application
The fundamental idea

In this article series we saw how to consume a service method from code-behind, how to consume a traditional Web Service, WCF service and Web-API using jQuery Ajax method.  Hope you have understood the entire concept. Let me ask one question. Why does all those various services exist in the market?

The answer is men are greedy by nature. Ha..Ha.. No, this is not an industrial standard answer. The answer is there is a limitation of various services. One cannot fulfill all needs.

  • Think about Web Service

    In a traditional Web Service the communication protocol is SOAP. The message passing language (in the broad sense, let's consider it as a language) is XML. And each time a SOAP request and response is transfered, the unnecessary data is transfered between client and server. So, this is one limitation of a Web Service.

  • WCF Service

    Then Microsoft gave us WCF as a solution. It's very fine , supports XML and JSON as data format and the big advantage is that it is RESTful service.

  • Then why Web-API?

    If you read the WCF portion of this series then you know how many places we have changed/modified to run our service. So, in WCF many settings are needed. The latest solution is Web-API. It's RESTful in nature and nearly no settings are needed.  All types of applications can be consumed by it in various message formats and many more.

Conclusion

In this article we learned to consume a Web-API service using a jQuery Ajax method. Then we have explained their limitation and advantages. Hope you have understood the concept. We will explain more about jQuery Ajax functions in this series.


Similar Articles