Creating web api and consuming part 2

Creating Asp.net Web API and
consuming it through HTML Clients
– Part II
Howdy Readers,
Consuming web API through HTML clients
Welcome to our blog ! In our previous post we have seen how to create ASP.NET Web API. If you
aren’t still comfortable in creating Web API then I would suggest you to read our post for creating
Web API.
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 w3 schools 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://dipendra
shekhawat.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="GetAllProduct
s();" />
<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>

Creating ASP.NET Web API and consuming through html clients – 1
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',

alert('Product deleted');
GetAllProducts();
},
alert('Product not found');
}
});
}
function UpdateProduct() {
var product = {
Id: $('#searchProductID').val(),
Name: $('#EditName').val(),
Type: $('#EditType').val(),
Description: $('#EditDescription').val(),
Price: $('#EditPrice').val()
};
$.ajax({
type: 'PUT',
data: JSON.stringify(product),
contentType: "application/json;charset=utf-8",
alert('Employee updated');
GetAllEmployee();
},

}
});
}
function AddProduct() {
var product = {
Name: $('#Name').val(),
Type: $('#Type').val(),
Description: $('#Description').val(),
Price: $('#Price').val()
};
$.ajax({
type: 'POST',
data: JSON.stringify(product),
contentType: "application/json;charset=utf-8",
alert('Product added');
GetAllProducts();
},
}
});
}
function DisplayProductList(products) {
$("#ProductList").empty();

"</table>";
$("#prod").html(result);
}
</script>
Below 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.

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.

Creating web api and consuming part 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Creating web api and consuming part 2

Ähnlich wie Creating web api and consuming part 2 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Creating web api and consuming part 2