Today I want to share how to consume ASP.NET Web API by using jQuery. How to do that? Just send HTTP GET, POST, PUT, DELETE request to the Web API with JSON format content. I will use the same address book Web API for testing which I had created in my previous post.
First, add JQuery to your web project by using NuGet.
At the UI designer page, create all the necessary form and fields. I reuse the same UI which I did for my previous post, and added a few extra buttons with JQuery label. These buttons are using AJAX to invoke the Web API.
The following are the Javascript / JQuery that use to invoke the Web API:
Basically, the concept is the same. When you use the HttpClient class to invoke the Web API during postback, compare to the AJAX way that uses JQuery, you will get the same result. As long as the client is sending the correct and expected HTTP header and content, the Web API will just accept and process it. And of course the user experience is different between postback and AJAX.
You may think that using HttpClient to call Web API during postback is not efficient because of every Web API call, you need to postback and go through all the ASP.NET page life cycle. However, in a Service Oriented Architecture (SOA) environment, when you are separating the web application and web service, especially the web application is sitting in DMZ while the web service is sitting in safe zone, then you have to consume the Web API (web service) by using server code (HttpClient in ASP.NET), refer to this post for sample code. When you are heavily rely on Javascript, jQuery, Angular.js or any client scripting framework to invoke the Web API, then it is not going to work because the invocation is coming from the client browser, it cannot direct access to the Web API which is sitting in the safe zone protected with firewall. Of course, if your Web API is supposed to expose to public, then it is different story.
If you are interested with my complete source code, feel free to download it from HERE.
First, add JQuery to your web project by using NuGet.
At the UI designer page, create all the necessary form and fields. I reuse the same UI which I did for my previous post, and added a few extra buttons with JQuery label. These buttons are using AJAX to invoke the Web API.
The following are the Javascript / JQuery that use to invoke the Web API:
HTTP GET
The following method send HTTP GET request to the Web API and get the response data to form a custom grid view (table):
function
Get() {
$.ajax({
type: 'GET',
url: 'http://localhost:5593/api/AddressBook',
dataType: 'json',
success: function
(response) {
var
addressBookList = response;
CreateTableColumns();
$.each(addressBookList, function
() {
$('#addressBookTable')
.append($('<tr>')
.append('<td>'
+ this.ID + '</td>')
.append('<td>'
+ this.FirstName + '</td>')
.append('<td>'
+ this.LastName + '</td>')
.append('<td>'
+ this.Contact + '</td>')
.append('</tr>'));
});
}
});
}
HTTP POST
The following method send HTTP POST request to the Web API to create new record:
function
Post() {
var
addressBook = {
ID: $('input[type="text"][id="ID"]').val(),
FirstName: $('input[type="text"][id="firstName"]').val(),
LastName: $('input[type="text"][id="lastName"]').val(),
Contact: $('input[type="text"][id="contact"]').val()
};
$.ajax({
type: 'POST',
url: 'http://localhost:5593/api/AddressBook',
data: addressBook,
dataType: 'json',
success: function
() {
//do something here
after posted successfully
alert('Success!
Click the Refresh button to see the effect.');
}
});
}
HTTP PUT
The following method send HTTP PUT request to the Web API to update an existing record:
function
Put() {
var
addressBook = {
ID: $('input[type="text"][id="ID"]').val(),
FirstName: $('input[type="text"][id="firstName"]').val(),
LastName: $('input[type="text"][id="lastName"]').val(),
Contact: $('input[type="text"][id="contact"]').val()
};
$.ajax({
type: 'PUT',
url: 'http://localhost:5593/api/AddressBook/'
+ addressBook.ID,
data: addressBook,
dataType: 'json',
success: function
() {
//do something here
after posted successfully
alert('Success!
Click the Refresh button to see the effect.');
}
});
}
HTTP DELETE
The following method send HTTP DELETE request to the Web API to delete an existing record:
function
Delete() {
var
id = $('input[type="text"][id="ID"]').val();
$.ajax({
type: 'DELETE',
url: 'http://localhost:5593/api/AddressBook/'
+ id,
success: function
() {
//do something here
after posted successfully
alert('Success!
Click the Refresh button to see the effect.');
}
});
}
Basically, the concept is the same. When you use the HttpClient class to invoke the Web API during postback, compare to the AJAX way that uses JQuery, you will get the same result. As long as the client is sending the correct and expected HTTP header and content, the Web API will just accept and process it. And of course the user experience is different between postback and AJAX.
You may think that using HttpClient to call Web API during postback is not efficient because of every Web API call, you need to postback and go through all the ASP.NET page life cycle. However, in a Service Oriented Architecture (SOA) environment, when you are separating the web application and web service, especially the web application is sitting in DMZ while the web service is sitting in safe zone, then you have to consume the Web API (web service) by using server code (HttpClient in ASP.NET), refer to this post for sample code. When you are heavily rely on Javascript, jQuery, Angular.js or any client scripting framework to invoke the Web API, then it is not going to work because the invocation is coming from the client browser, it cannot direct access to the Web API which is sitting in the safe zone protected with firewall. Of course, if your Web API is supposed to expose to public, then it is different story.
If you are interested with my complete source code, feel free to download it from HERE.
