Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Call ASP.NET Web API from jQuery

Suggested Videos
Part 10 - Custom method names in ASP.NET Web API
Part 11 - ASP.NET Web API query string parameters
Part 12 - FromBody and FromUri in Web API

In this video we will discuss how to call ASP.NET Web API Service using jQuery.



When "Get All Employees" button is clicked we want to retrieve all the employees and display their fullname in unordered list. When "Clear" button is clicked we want to clear the employees from the list.
Call ASP.NET Web API from jQuery



<!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');
            $('#btn').click(function () {
                $.ajax({
                    type: 'GET',
                    url: "api/employees/",
                    dataType: 'json',
                    success: function (data) {
                        ulEmployees.empty();
                        $.each(data, function (index, val) {
                            var fullName = val.FirstName + ' ' + val.LastName;
                            ulEmployees.append('<li>' + fullName + '</li>');
                        });
                    }
                });
            });
            $('#btnClear').click(function () {
                ulEmployees.empty();
            });
        });
    </script>
</head>
<body>
    <div>
        <input id="btn" type="button" value="Get All Employees" />
        <input id="btnClear" type="button" value="Clear" />
        <ul id="ulEmployees" />
    </div>
</body>
</html>

In our case both the client (i.e the HTML page that contains the ajax code) and the asp.net web api service are in the same project so it worked without any problem. If they are present in different projects then this wouldn't work.

In our next video we will discuss 
  • Why the AJAX call wouldn't work if the client and service are in different projects
  • How to make it work
ASP.NET Web API tutorial for beginners

6 comments:

  1. Hii Sir You are not using any method while calling webapi how its mapping which method call. ???

    ReplyDelete
    Replies
    1. He is calling Web Api method api/Employee using GET. That means It will invoke HTTPGet Employee Action method.

      Delete
  2. jQuery get method is being used to to call the webapi

    ReplyDelete
  3. In web api http verb get is mapped to a method in specified controller that has the name get and in this way you need not to specify the function in ajax calling

    ReplyDelete
  4. Hi sir, when i use same method in jquery am getting undefined value instead of employees detais.
    what's problem for this please let me know sir.

    ReplyDelete
    Replies
    1. if you have added new CamelCasePropertyNamesContractResolver() as ContractResolver use firstName and lastName

      Delete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.