Creating ASP.NET Web API And Consuming It Through HTML Clients

Before reading this article, I would recommend reading the following previous part:

Creating ASP.NET Web API And Consuming It Through HTML Clients - Part 1

Consuming Web API through HTML clients

Today, we will be focusing on consuming web API through HTML clients. Trust me guys, it’s very easy to consume web API and we will do that using JQuery. If you are unfamiliar with JQuery then please refer W3Schools for getting some basic idea about it. Latest version of JQuery can be downloaded from here.

Modify the default file “index.cshtml” in the View/Home folder with the following Markup to provide a GUI for displaying products and their different actions.

<!DOCTYPE html>
<html lang="en">
<body>
<header>
<script type="text/javascript" src="../../Scripts/jquery-1.8.2.js"></script>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Welcome to ASP.NET Web API | Demo by <a href="http://dipendrashekhawat.com" target="_blank">Dipendra Shekhawat</a></h1> </hgroup>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<div>
<h4>Product List</h4>
<input type="button" value="View All Products" onclick="GetAllProducts();" />
<ul id="ProductList" /> </div>
<div>
<h4>Search by ID</h4>
<input type="text" id="searchProductID" size="5" />
<input type="button" value="Search" onclick="FindProduct();" />
<p id="prod" /> </div>
<div>
<h4>Delete Product by ID</h4>
<input type="text" id="delProductID" size="5" />
<input type="button" value="Delete" onclick="DeleteProduct();" /> </div>
<div>
<h4>Add Product </h4>
<table>
<tr>
<td>Name</td>
<td>
<input type="text" id="Name" />
</td>
</tr>
<tr>
<td>Type</td>
<td>
<input type="text" id="Type" />
</td>
</tr>
<tr>
<td>Description</td>
<td>
<input type="text" id="Description" />
</td>
</tr>
<tr>
<td>Price</td>
<td>
<input type="text" id="Price" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Add" onclick="AddProduct();" />
</td>
</tr>
</table>
</div>
</section>
</div>
</body>

Now add the following script tag just after the </body> (closing body tag) to call web API:

<script type="text/javascript">
var hostUrl = "http://" + document.location.hostname + ":" + window.location.port;
var apiUrl = '/api/Product';
$(document).ready(function() {});
function GetAllProducts()
{
$.ajax(
{
url: hostUrl + apiUrl,
type: 'GET',
dataType: 'json',
success: function(data)
{
DisplayProductList(data);
},
error: function()
{
alert('Some error occured');
}
});
}
function FindProduct()
{
var id = $('#searchProductID').val();
$.getJSON(apiUrl + '/' + id).done(function(data)
{
DisplayProductForEdit(data);
}).fail(function(jqXHR, textStatus, err)
{
$('#prod').text('Error: ' + err);
});
}
function DeleteProduct()
{
var id = $('#delProductID').val();
$.ajax(
{
url: hostUrl + apiUrl + '/' + id,
type: 'DELETE',
dataType: 'json',
success: function(data)
{
alert('Product deleted');
GetAllProducts();
},
error: function()
{
alert('Product not found');
}
});
}
function UpdateProduct()
{
var product = {
Id: $('#searchProductID').val(),
Name: $('#EditName').val(),
Type: $('#EditType').val(),
Description: $('#EditDescription').val(),
Price: $('#EditPrice').val()
};
$.ajax(
{
url: hostUrl + apiUrl,
type: 'PUT',
data: JSON.stringify(product),
contentType: "application/json;charset=utf-8",
success: function(data)
{
alert('Employee updated');
GetAllEmployee();
},
error: function()
{
alert('Some error occured');
}
});
}
function AddProduct()
{
var product = {
Name: $('#Name').val(),
Type: $('#Type').val(),
Description: $('#Description').val(),
Price: $('#Price').val()
};
$.ajax(
{
url: hostUrl + apiUrl,
type: 'POST',
data: JSON.stringify(product),
contentType: "application/json;charset=utf-8",
success: function(data)
{
alert('Product added');
GetAllProducts();
},
error: function()
{
alert('Some error occured');
}
});
}
function DisplayProductList(products)
{
$("#ProductList").empty();
var result = "<table><th>ID</th><th>Name</th><th>Type</th><th>Description</th><th>Price</th>";
$.each(products, function(index, product)
{
result += "<tr><td>" + product.Id + "</td><td> " + product.Name + "</td><td>" + product.Type + "</td><td>" + product.Description + "</td><td>" + '₹ ' + product.Price + "</td></tr>";
});
result += "</table>";
$("#ProductList").html(result);
}
function DisplayProductForEdit(product)
{
$("#prod").empty();
if (product == null)
{
alert('Product Not Found')
return;
}
$("#prod").empty();
var result = "<table>" + "<tr><td>Name</td><td><input type='text' id='EditName' value='" + product.Name + "'</td></tr>" + "<tr><td>Type</td><td><input type='text' id='EditType' value='" + product.Type + "'</td></tr>" + "<tr><td>Description</td><td><input type='text' id='EditDescription' value='" + product.Description + "'</td></tr>" + "<tr><td>Price</td><td><input type='text' id='EditPrice' value='" + product.Price + "'</td></tr>" + "<tr><td colspan='3'align='center'><input type='button' value='Update' onclick='UpdateProduct();' </td></tr>" + "</table>";
$("#prod").html(result);
}
</script>

The following are the screenshots for viewing all the products or finding a specific product. Similarly, you can delete a product from the list by specifying its ID or add a new product.
table

Hurrah! Now you have knowledge of creating ASP.NET Web API and consuming it through HTML Clients. Don’t keep it to yourself. Please feel free to share your knowledge among your friends or colleagues.

5 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy10y ago
Thanks for nice share
Muhammad Aqib Shehzad10y ago
Nice one Dear
Dipendra Shekhawat10y ago
Thanks both of you Raja T and Ankur Mistry
Ankur Mistry10y ago
Nice share
Raja T10y ago
Nice, Thanks for sharing