Consuming Web API Service From jQuery

Consuming Web API Service From jQuery

In this article, I am going to discuss how to Consuming Web API Service From jQuery. We are going to work with the same example that we created in our previous article where we discussed Parameter Binding in WEB API. So please read our previous article before proceeding with this article.

Business Requirements:

When we click on the “Get All Employees” button, then we need to retrieve all the employee’s information and then display this information in an unordered list as shown in the image below. When we click on the “Clear” button then we need to clear the employees from the unordered list. 

Consuming ASP.NET Web API Service From jQuery

Let’s discuss how to consuming ASP.NET Web API Service From jQuery

Modify the Employee Controller of our project as shown below where we create one action which will return the list of employees.

namespace WEB_API_Using_AJAX.Controllers
{
    public class EmployeeController : ApiController
    {
        [HttpGet]
        public IEnumerable<Employee> GetEmployees()
        {
            EmployeeDBContext dbContext = new EmployeeDBContext();
            return dbContext.Employees.ToList();
        }
    }
}

Then modify the WebApiConfig class which is present in the inside App_Start folder as shown below. Here we are changing the URI pattern to allow action name as part of the URL.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}
Let’s add one Html Page to our project with the name HtmlPage1.html

Right-click on the project and then select Add => Html page as shown below

Consuming WEB API Service From jQuery - Adding HTML Page

In the next pop up specify the name for the HTML page and then click on the Ok button as shown in the image below

Consuming WEB API Service From jQuery - Providing Page Name

Once you created the page then copy and paste the following code in it.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ulEmployees = $('#ulEmployees');
            $('#btnGetEmployees').click(function () {
                $.ajax({
                    type: 'GET',
                    url: "api/Employees/GetEmployees",
                    dataType: 'json',
                    success: function (data) {
                        ulEmployees.empty();
                        $.each(data, function (index, val) {
                            ulEmployees.append('<li> First Name - ' + val.FirstName + " Last Name - " + val.LastName + " Gender- " + val.Gender + '</li>');
                        });
                    }
                });
            });
            $('#btnClear').click(function () {
                ulEmployees.empty();
            });
        });
    </script>
</head>
<body>
    <div>
        <input id="btnGetEmployees" type="button" value="Get All Employees" />
        <input id="btnClear" type="button" value="Clear" />
        <ul id="ulEmployees" />
    </div>
</body>
</html>

That’s it; now run the application and navigate to the following URL in the browser

http://localhost:xxxxx/htmlpage1.html (instead of xxxxx you need to provide the port number where your application is running). It will display the following page.

Consuming WEB API Service From jQuery - HTML Page

Once you click on Get All Employees button it will display the employees data as unordered list as shown below on the below page.

How to Consuming ASP.NET Web API From jQuery

In this example, both the client (i.e. the HTML page that contains the AJAX code) and the ASP.NET Web API service are present in the same project so it worked without any problem. But, if they are present in different projects then this wouldn’t work.

In the next article, we will discuss Why the AJAX call wouldn’t work if the client and service are present in different projects and then we will discuss how to make it work. Here, in this article, I try to explain How to Consuming ASP.NET Web API From jQuery AJAX step by step with a simple example. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.

5 thoughts on “Consuming Web API Service From jQuery”

  1. ‘public class EmployeeController : ApiController’ must be ‘public class EmployeesController : ApiController’
    case and number matter

  2. Also: will need to change the script src reference in HtmlPage1.html to match whatever (latest) jquery script that visual studio inserts when creating the app (definitely won’t be jquery-1.10.2 anymore)

  3. I want to know the meaning of variable (data) in this function :
    success: function (data) {
    ulEmployees.empty();
    $.each(data, function (index, val) {
    ulEmployees.append(‘ First Name – ‘ + val.FirstName + ” Last Name – ” + val.LastName + ” Gender- ” + val.Gender + ”);
    });
    and where && when it take its value

Leave a Reply

Your email address will not be published. Required fields are marked *