Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

16 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
  5. Am not getting the required data when i click the GetallEmployee button is there any ajax is not working???

    ReplyDelete
    Replies
    1. It works fine for me. Error has not come. Thanks Kudvenkat Sir.

      You check your jquery code. Are you placed # symbol inside $('#btn') and $('#btnClear') ?

      Delete
  6. I was getting "undefined value" as well but that issue was resolved after commenting "config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();" in WebApiConfig.cs file under App_Start folder.

    ReplyDelete
  7. Yes Ajax call doesn't happen at all. Neither success nor error. Can you please help out.

    ReplyDelete
  8. Sir,If i click GetEmployees btn it shows nothing

    ReplyDelete
  9. Sir, Why should we use Index (line 17) as a parameter within function?
    intellisense on the index says: "index is declared but its value is never read."
    With THANKS

    ReplyDelete
  10. You must follow previous videos of this tutorial to work this program well.

    ReplyDelete
  11. changing commented line to un-commented code in the employee controller fixed the issue.
    case "all":
    return Request.CreateResponse(entities.Employees1.ToList());
    //return Request.CreateResponse(HttpStatusCode.OK, entities.Employees1.ToList());

    ReplyDelete
  12. can anyone explain the url " url: "api/employees/"," i am confusing where we get this url and how ????

    ReplyDelete

It would be great if you can help share these free resources