In this article i am going to explain about How to get/fetch data from the WebAPI or how to query WebAPI.
In my previous article i have explained about How To Create Your First WEB API Project In ASP.Net MVC, Check Container Exists In Azure Blob Storage In C#.Net, Convert Dataset Datatable To Json Data Array In Asp.Net C#.Net & VB.Net Or How To Use JavaScriptSerializer To Convert Datatable To Json Data Array , How To Show Tooltip On Mouse Hover In Gridview In Using JQuery In ASP.Net C#.Net & VB.Net, SQL Script To Drop Multiple Tables,Procedures At Once , SQL Script To Drop Multiple Tables,Procedures At Once , Convert Dataset Datatable To Json Data Array, SQL Script To Drop Multiple Tables,Procedures At Once In Sql Server, and many articles in C#.Net,ASP.Net,VB.Net,Grid View,Javascript,jQuery,SQL Server and many other topics.
Before proceeding to explain about how to get data from web api should know how to create the web api project. Read this article and then come to this article.
In the previous article i have created two controller methods. they are
For the GetEmployee method, the id in the URI is a placeholder. For example, to get the employee with ID of 2, the URI is api/employee/2.
Now do the right click on the project select add then new item as shown in figure.
In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. Name the page "index.html" like shown in below.
In the index.html i have included the jQuery library. And the file have two tables one for showing all the employees and another one is for showing particular employee details. The html file has a input field to input employee id and a button. While clicking on the button it will fetch the details for that particular employee id and display details in the table. Below is the entire code.
Now if you run the code you will get the below output.
Hope you have enjoyed. Please share your comments and share this article.. Happy coding...
In my previous article i have explained about How To Create Your First WEB API Project In ASP.Net MVC, Check Container Exists In Azure Blob Storage In C#.Net, Convert Dataset Datatable To Json Data Array In Asp.Net C#.Net & VB.Net Or How To Use JavaScriptSerializer To Convert Datatable To Json Data Array , How To Show Tooltip On Mouse Hover In Gridview In Using JQuery In ASP.Net C#.Net & VB.Net, SQL Script To Drop Multiple Tables,Procedures At Once , SQL Script To Drop Multiple Tables,Procedures At Once , Convert Dataset Datatable To Json Data Array, SQL Script To Drop Multiple Tables,Procedures At Once In Sql Server, and many articles in C#.Net,ASP.Net,VB.Net,Grid View,Javascript,jQuery,SQL Server and many other topics.
Before proceeding to explain about how to get data from web api should know how to create the web api project. Read this article and then come to this article.
In the previous article i have created two controller methods. they are
| Controller Method | URI |
|---|---|
| GetAllEmployees | /api/employees |
| GetEmployee | /api/employee/id |
For the GetEmployee method, the id in the URI is a placeholder. For example, to get the employee with ID of 2, the URI is api/employee/2.
Now do the right click on the project select add then new item as shown in figure.
In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. Name the page "index.html" like shown in below.
In the index.html i have included the jQuery library. And the file have two tables one for showing all the employees and another one is for showing particular employee details. The html file has a input field to input employee id and a button. While clicking on the button it will fetch the details for that particular employee id and display details in the table. Below is the entire code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Product App</title>
</head>
<body>
<div>
<h2>All Employees</h2>
<table id="tblEmployees" border="1" style="border-collapse:collapse;"></table>
</div>
<div>
<h2>Search by ID</h2>
<input type="text" id="employeeId" size="5" />
<input type="button" value="Search" onclick="find();" />
<p id="product" />
<table id="tblEmployee" border="1" style="border-collapse:collapse;"></table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var uri = 'api/employee';
$(document).ready(function () {
// Send an AJAX request
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of products.
$('<tr>', { html: formHeader() }).appendTo($('#tblEmployees'));
$.each(data, function (key, item) {
// Add a row item for the product.
$('<tr>', { html: formatItem(item) }).appendTo($('#tblEmployees'));
});
});
});
function formatItem(item) {
return '<td>' +
item.EmployeeId + '</td><td>' + item.EmployeeName + '</td><td>' + item.Department + '</td><td>' + item.Designation + '</td>';
}
function formHeader() {
return '<th>EmployeeId </th><th>EmployeeName
</th><th>Department </th><th>Designation</th>';
}
function find() {
var id = $('#employeeId').val();
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#tblEmployee').html(formHeader());
$('<tr>', { html: formatItem(data) }).appendTo($('#tblEmployee'));
})
.fail(function (jqXHR, textStatus, err) {
$('#tblEmployee').html('Error: ' + err);
});
}
</script>
</body>
</html>
You May Also Like...
- How to get fetch data from ASP.Net WebAPI or how to query ASP.Net WebAPI.
- How to create your first WEB API Project in ASP.Net MVC
Comments
Post a Comment