Loading

ASP.NET Web API

How to Consuming Web API Service From jQuery?. The Complete ASP.NET Web API Developer Course 2022 [Videos].

In this Video, 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 Video where we discussed Parameter Binding in WEB API. So please watch our previous Video before proceeding with this Video.

Business Requirements:

When we click on the “Get All Employees” button, then we need to retrieve all the employees 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. 

Consuming ASP.NET Web API Service From jQuery

Lets 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 }
);
}
}
Lets 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

Consuming WEB API Service From jQuery - Adding HTML Page

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

Consuming WEB API Service From jQuery - Providing Page Name

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).watchy(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>

Thats 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.

Consuming WEB API Service From jQuery - HTML 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.

How to Consuming ASP.NET Web API From jQuery

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 wouldnt work.

See All

Comments (320 Comments)

Submit Your Comment

See All Posts

Related Posts

ASP.NET Web API / Blog

What is ASP.NET Web API Application?

In this ASP.NET Web API Tutorials series, I covered all the features of ASP.NET Web API. You will learn from basic to advance level features of ASP.NET Web API. The term API stands for “Application Programming Interface” and ASP.NET Web API is a framework provided by Microsoft which makes it easy to build Web APIs, i.e. it is used to develop HTTP-based web services on the top of .NET Framework.
3-Feb-2022 /34 /320

ASP.NET Web API / Blog

How to creat ASP.NET Web API Application using Visual Studio?

In this article, I am going to discuss the step-by-step procedure for Creating ASP.NET Web API Application. Please read our previous article before proceeding to this article where we gave an overview of the ASP.NET Web API framework. As part of this article, we ate going to discuss the following pointers.
3-Feb-2022 /34 /320

ASP.NET Web API / Blog

How to add Swagger in Web API Application?

In this article, I am going to discuss how to add Swagger in Web API Application to document and test restful Web API services. Please read our previous article where we discussed How to Create an ASP.NET Web API Application step by step before proceeding to this article as we are going to work with the same example. As part of this article, we are going to discuss the following pointers.
3-Feb-2022 /34 /320