This tutorial will cover the following types of calling a web api method using jquery ajax.

  • Call a GET method without parameters
  • Call a GET method with a single parameter
  • Call a GET method with multiple paramerer
  • Call a POST method with multiple parameter

Before we start, Let me quickly created an api controller. Below is an api controller named “EmployeeController”, which will be used throughout all the examples.

public class EmployeeController : ApiController
{
    List<Employee> _employeeList = new List<Employee>
      {
          new Employee {FirstName = "Yasser", LastName = "Shaikh", Age = 24, DepartmentName = "S/W Engg"},
          new Employee {FirstName = "Roshan", LastName = "Punwani", Age = 25, DepartmentName = "SQL"},
          new Employee {FirstName = "Siddhesh", LastName = "Vasani", Age = 45, DepartmentName = "Sharepoint"},
          new Employee {FirstName = "Shival", LastName = "Sharma", Age = 36, DepartmentName = "Java Games"}
      };

    // all methods to come here.
}

public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string DepartmentName { get; set; }
}

Ok, lets get started…

Type 1 : Call a GET method without parameters

Let us first create a GET method that does NOT accept any input parameters, this method will return a list of all the employees.

public List<Employee> GetAllEmployees()
{
   return _employeeList;
}

URL : http://localhost:1235/api/employee/

Using this url in the browser will give you the following output.

Web Api - GETWeb Api - GET

Jquery Ajax Call :

<script type="text/javascript">
$(document).ready(function () {
    var url = '/api/Employee';
    $.ajax({
        url: url,
        type: 'GET',
        success: function (result) {
            // use the result value here.
        }
    });
});
</script>

Console Output

Web Api - GET - Console log


Type 2 : Call a GET method with a single parameter

This method takes in the first name of the employee and returns a list of matching employees

public List<Employee> GetEmployeeByFirstName(string fname)
{
    return _employeeList.Where(m => m.FirstName == fname).ToList();
}

URL : http://localhost:1235/api/employee?fname=Yasser

Using this url in the browser will give you the following output.

Web Api - GET Single Param

Jquery Ajax Call :

<script type="text/javascript">
$(document).ready(function () {
    var fname = "Yasser"; // can be a value from a txtbox
    var url = '/api/Employee?fname=' + fname;
    $.ajax({
        url: url,
        type: 'GET',
        success: function (result) {
            // use the result value here.
        }
    });
});
</script>

Console Output

Web Api - GET Single Param - Console


Type 3 : Call a GET method with a multiple parameter

This method takes in the first name, last name and the age of the employee and returns a list of matching employees

public List<Employee> GetEmployeeByMultipleParams(string fname, string lname, int age)
{
   return _employeeList.Where(m => m.FirstName == fname && m.LastName == lname && m.Age == age).ToList();
}

URL : http://localhost:1235/api/employee?fname=Yasser&lname=Shaikh&age=24

Using this url in the browser will give you the following output.

Web Api - GET Multiple Param

Jquery Ajax Call :

<script type="text/javascript">
$(document).ready(function () {
    var fname = "Yasser"; // can be a value from a txtbox
    var lname = "Shaikh"; // can be a value from a txtbox
    var age = 24; // can be a value from a txtbox
    var url = '/api/Employee?fname=' + fname + "&lname=" + lname + "&age=" + age;
    $.ajax({
        url: url,
        type: 'GET',
        success: function (result) {
            // use the result value here.
        }
    });
});
</script>

Console Output

Web Api - GET Multiple Param - Console


Type 4 : Call a POST method with a multiple parameter

public bool PostEmployee(Employee employee)
{
    return _service.UpdateEmployee(employee);
}

Jquery Ajax Call :

<script type="text/javascript">
$(document).ready(function () {

    var url = '/api/Employee/PostEmployee';
    $.ajax({
        url: url,
        data: getData(),
        type: 'POST',
        contentType: "application/json",
        success: function (result) {
            console.log(result);
        }
    });

    function getData() {
        var employee = new Object();
        employee.FirstName = "Yasser R";
        employee.LastName = "Shaikh";
        employee.Age = "25";
        employee.DepartmentName = "S/W Engg";

        return JSON.stringify(employee);
    }
});

Hope this helps :)

Further Reading :

Net Tuts + : Building an ASP.NET MVC4 Application with EF and WebAPI

Web API : The Official Microsoft ASP.NET Site