In this article, I am going to discuss how to Consuming ASP.NET 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 ASP.NET 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.
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.
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.
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.
Summary:
I Hope this post will be helpful to understand how to consume ASP.NET Web API Service using jQuery.
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉
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"></ul>
</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.
Summary:
I Hope this post will be helpful to understand how to consume ASP.NET Web API Service using jQuery.
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉
0 comments:
Post a Comment
If you like this website, please share with your friends on Facebook, Twitter, LinkedIn.