Back to: ASP.NET Web API Tutorials For Beginners and Professionals
Consuming Web API Service From jQuery
In this article, I am going to discuss how to Consuming Web API Service From jQuery. We are going to work with the same example that we created in our previous article where we discussed Parameter Binding in WEB API. So please read our previous article before proceeding with this article.
Business Requirements:
When we click on the “Get All Employees” button, then we need to retrieve all the employee’s information and then display this information in an unordered list as shown in the image below. When we click on the “Clear” button then we need to clear the employees from the unordered list.
Let’s discuss how to consuming ASP.NET Web API Service From jQuery
Modify the Employee Controller of our project as shown below where we create one action which will return the list of employees.
namespace WEB_API_Using_AJAX.Controllers
{
public class EmployeeController : ApiController
{
[HttpGet]
public IEnumerable<Employee> GetEmployees()
{
EmployeeDBContext dbContext = new EmployeeDBContext();
return dbContext.Employees.ToList();
}
}
}
Then modify the WebApiConfig class which is present in the inside App_Start folder as shown below. Here we are changing the URI pattern to allow action name as part of the URL.
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
Let’s add one Html Page to our project with the name HtmlPage1.html
Right-click on the project and then select Add => Html page as shown below
In the next pop up specify the name for the HTML page and then click on the Ok button as shown in the image below
Once you created the page then copy and paste the following code in it.
<!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');
$('#btnGetEmployees').click(function () {
$.ajax({
type: 'GET',
url: "api/Employees/GetEmployees",
dataType: 'json',
success: function (data) {
ulEmployees.empty();
$.each(data, function (index, val) {
ulEmployees.append('<li> First Name - ' + val.FirstName + " Last Name - " + val.LastName + " Gender- " + val.Gender + '</li>');
});
}
});
});
$('#btnClear').click(function () {
ulEmployees.empty();
});
});
</script>
</head>
<body>
<div>
<input id="btnGetEmployees" type="button" value="Get All Employees" />
<input id="btnClear" type="button" value="Clear" />
<ul id="ulEmployees" />
</div>
</body>
</html>
That’s it; now run the application and navigate to the following URL in the browser
http://localhost:xxxxx/htmlpage1.html (instead of xxxxx you need to provide the port number where your application is running). It will display the following page.
Once you click on Get All Employees button it will display the employees data as unordered list as shown below on the below page.
In this example, both the client (i.e. the HTML page that contains the AJAX code) and the ASP.NET Web API service are present in the same project so it worked without any problem. But, if they are present in different projects then this wouldn’t work.
In the next article, we will discuss Why the AJAX call wouldn’t work if the client and service are present in different projects and then we will discuss how to make it work. Here, in this article, I try to explain How to Consuming ASP.NET Web API From jQuery AJAX step by step with a simple example. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Cool!!
‘public class EmployeeController : ApiController’ must be ‘public class EmployeesController : ApiController’
case and number matter
Also: will need to change the script src reference in HtmlPage1.html to match whatever (latest) jquery script that visual studio inserts when creating the app (definitely won’t be jquery-1.10.2 anymore)
yes，it is important
I want to know the meaning of variable (data) in this function :
success: function (data) {
ulEmployees.empty();
$.each(data, function (index, val) {
ulEmployees.append(‘ First Name – ‘ + val.FirstName + ” Last Name – ” + val.LastName + ” Gender- ” + val.Gender + ”);
});
and where && when it take its value