Hello friends,Today I am going to write codes for grid view with jquery to get employee list,edit employee and delete.
It will be help full to show data in grid .
So, Let's Start-
We are going to do three things here .
1. Get employees details from database and show as a grid .
2. Modify the employees details.
3. Delete records.
In this post we will cover only first scenario :
Our final output will be like below:
Now lets start:
On the aspx page write the following code:
In the above code:
<table id="gridEmployee"> has been taken to bind employee list as a gridview.
and there is button above ,On the click event of this button call a javascript function : onclick="getEmployeeList()"
Now add the below script to get http request from server side:
<script type="text/javascript">
function getEmplyeeList() {
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "blogtest.aspx/getEmployee",// Url of web method
data: "{}",
cache: false,
dataType: "json",
success: function (data) {
$("#gridEmployee").empty(); // to clear table on each button click
// define header for the grid
$("#gridEmployee").append("<tr class='ui-state-default ui-corner-all'><td class='td' >Employee id</td><td class='td'>Employee Name</td><td class='td'>Age</td><td class='td'>Department</td><td class='td'>Edit</td><td class='td'>Delete</td></tr>");
// bind employee data in the grid
for (var i = 0; i < data.d.length; i++) {
$("#gridEmployee").append('<tr><td class=ui-state-highlight ui-corner-all>' +
data.d[i].employeeId + '</td><td class=ui-state-highlight ui-corner-all>' + data.d[i].employeeName + '</td><td
class=ui-state-highlight ui-corner-all>' + data.d[i].age + '</td><td class=ui-state-highlight ui-corner-all>' + data.d[i].deparment + '</td><td class=ui-state-highlight ui-corner-all><img src="images/edit.jpg" onclick="ModifyEmployee(\'' + data.d[i].employeeId + '\',\'' + data.d[i].employeeName + '\',\'' + data.d[i].age + '\',\'' + data.d[i].deparment + '\')"/></td><td class=ui-state-highlight ui-corner-all> <img src="images/delete.jpg" onclick="ModifyEmployee(\'' + data.d[i].employeeId + '\',\'' + data.d[i].employeeName + '\',\'' + data.d[i].age + '\',\'' + data.d[i].deparment + '\')"/></td></tr>');
}
},
error: function (result) {
alert('error');
}
});
});
}
</script>
Now create a web method named :getEmployee , in .cs page
[WebMethod(EnableSession = true)]
public static List<members> getEmployee()
{
//You can get data from database and bind in the below list
List<members> employeeList = new List<members>();
employeeList.Add(new members { employeeId = "1", employeeName = "Manoj",age="25 years",deparment="Information Technology" });
employeeList.Add(new members { employeeId = "2", employeeName = "Vishal", age = "28 year", deparment = "Account" });
employeeList.Add(new members { employeeId = "3", employeeName = "Sourav", age = "29 years", deparment = "Finance" });
employeeList.Add(new members { employeeId = "4", employeeName = "Prabhat", age = "30 years", deparment = "Information Technology" });
employeeList.Add(new members { employeeId = "5", employeeName = "Vijay", age = "38 years", deparment = "HR" });
employeeList.Add(new members { employeeId = "6", employeeName = "Prashant", age = "36 year", deparment = "Sales & Marketing" });
}
That's it. Now we have completed our first scenario .In the next post we will learn how to modify and delete the records.
If any confusion please contact me : mkumar.soft@gmail.com
Happy coding..
