|
In this article I will talk about how to consume Web API in web page using jQuery. We will also inspect request from jQuery and response from Web API.
Let's write code.
Step 1: Download code from ASP.NET MVC 4 - Hello Web API or you can create Web API application following the steps.
Step 2: Add DemoWebAPI.html in the solution which you have downloaded from Step 1 or the application you have created followed the steps of previous article.
Step 3: Add jquery-1.6.2.min.js in the head section of html page which is present in the Scripts folder.
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
Step 4: Add below html body in the page.
< body>
<div>
<h1>Customers</h1>
</div>
<div>
<input type="button" value="Get All Customers" onclick="showAll();" />
<br />
<label for="customerId">Customer ID:</label>
<input type="text" id="customerId" size="5" />
<input type="button" value="Search By Id" onclick="SearchCustomerById();" />
<br />
<label for="customerId">Customer Name:</label>
<input type="text" id="customerName" size="5" />
<input type="button" value="Search By Name" onclick="SearchCustomerByName();" />
<p id="customers" />
</div>
</body>
Step 5: Add below scripts in the DemoWebAPI.html page.
< script type="text/javascript">
function showAll() {
$.getJSON("api/customer/",
function (data) {
$.each(data, function (key, val) {
var str = 'Id: ' + val.CustomerId + '<br/>Name: ' + val.CustomerName;
$('<li/>', { html: str })
.appendTo($('#customers'));
});
});
}
function SearchCustomerById() {
var CustomerId = $('#customerId').val();
$.getJSON("api/customer/?CustomerId=" + CustomerId,
function (data) {
var str = "Name: " + data.CustomerName + '<br/>Address: ' + data.Address;
$('#customers').html(str);
})
.fail(
function (jqXHR, textStatus, err) {
$('#customers').html('Error: ' + err);
});
}
function SearchCustomerByName() {
var CustomerName = $('#customerName').val();
$.getJSON("api/customer/?CustomerName=" + CustomerName,
function (data) {
$.each(data, function (key, val) {
var str = val.CustomerName + '<br/>Address: ' + val.Address;
$('<li/>', { html: str })
.appendTo($('#customers'));
});
});
}
</script>
Step 6: Now run Web API. Port numbe might vary in your case.
Open another tab and type the url like shown below.
This ends the consuming of Web API in web page jQuery. Now we will analyze request and response.
Step 1: Press F12 to open IE developer tool.
Step 2: Open Network tab and click on Start capturing.
Step 3: Now click on Get All Customers, Search By Id and Search By Name button and you will notice three requests like show below.
Step 4: Now select each row one by one from the Developer tool and click on Go to details view butoon, let's inspect Request Header of each request.
Request header when you click on Get All Customers button.
Request header when you click on Search By Id
Request header when you click on Search By Name
If you notice all the above GET request header the search criteria travels on request header.
Step 5: Now Select "Response Body" tab for each request to see how we get response from Web API.
Response Body on Click of Get All Customers button.
Response Body on Click of Search By Id
Response Body on Click of Search By Name
If you notice all the response is in Json format which can be used with ease using jQuery Json.
This ends the article of consuming Web API in web page and inspecting request and response.
|