Post
Ask Question

Call ASP.NET WebAPI Using jQuery

Overview - In this article, we will see how to call an ASP.NET WebAPI Service, using jQuery and AJAX.

We will design a simple HTML page with two buttons and this HTML page will display the list of employees with the help of jQuery and AJAX. Let’s flip to Visual Studio. First, we need to add HTML page in our project, as given below-



Name the page as Employees.html. In this, we are going to use jQuery, so reference that in the head section and also add two buttons, where one is Id to get the list of all employees and another one is to clear the data, as given below-

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7.     <script src="http://localhost:52429/Scripts/jquery-1.10.2.js"></script>  
  8. </head>  
  9. <body>  
  10.     <input type="button" id="btn" value="Get All Employees" />  
  11.     <input type="button" id="btnClear" value="Clear" />  
  12. </body>  
  13. </html>  
Inside the head section, we include another jQuery code to call our ASP.NET WebAPI Service. Thus, when the document is ready, we want to pass an anonymous function, as given below-
  1. <script type="text/javascript">  
  2.      $(document).ready(function () {  
  3.   
  4.   
  5.      });  
  6.   
  7.  </script>  
As we need an unordered list multiple times, we store it in a variable, as given below-


Instead of finding in DOM every time, we will use this variable ulEmployees. Now, let’s associate a click event handler to this and Get All Employees button, as given below-



Thus, when we click the button, we want to call ASP.NET Web API Service, using jQuery AJAX. Thus, let’s use jQuery AJAX function, as given below-
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             var ulEmployees = $('#ulEmployees');  
  4.   
  5.             $('#btn').click(function () {  
  6.                 $.ajax({  
  7.                     type: 'GET',  
  8.                     url: 'api/Employees',  
  9.                     dataType: 'json',  
  10.                     success: function (data) {  
  11.   
  12.                         ulEmployees.empty();  
  13.                         $.each(data, function (index, val) {  
  14.                             var fullName = val.FirstName + ' ' + val.LastName;  
  15.                             ulEmployees.append('<li>' + fullName + '</li>') 
  16.                               
  17.                         });  
  18.                     }  
  19.   
  20.                 });  
  21.   
  22.             });  
  23.   
  24.             $('btnClear').click(function () {  
  25.                 ulEmployeess.empty();  
  26.             });  
  27.   
  28.         });  
  29.   
  30.     </script>  
Thus, this is our code, as we are using Get. Now, our Employees.html is present in the same project, so our URL will be relative URL here as api/pagename.html.

As we want data in JSON, we have to specify the datatype as JSON . Next, we are looping through each record in the database. We are passing an index value of each employee and displaying the names respectively.

Build the solution and run the app. We will see the output, as given below-



Notice, when you click on Get All Employees button, we get the list of employees, which we had written in Get method. When you click on Clear Button, the data clears.

Conclusion - This was all about calling ASP.NET WebAPI, using jQuery. Hope, this article was helpful!!

 


Similar Articles