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

In our case both the client (i.e the HTML page that contains the ajax code) and the 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

1 comment:

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


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.