Categories
Uncategorized

How to call web api method using jquery ajax in ASP.NET MVC 4

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