1. First Add WebService in your Asp.net WebApplication and Name Employees:

File >> New >> Project >> Web>> Asp.netWebAppliCation : then follow the figure:

Figure 1

Figure 2

2. You will find it in App Code Folder:

Figure 3

3. Open The Employees.asmx and add a class name EMPLOYEES and ADD some employees in it(List OF Employees) below Employee constructor:


Figure 4

Figure 5

4. Now Add Two Web Methods GetAllEmployees () and GetEMployeesByEmpCode() below List Of Employees:

Figure 6

5. Now Go To the Design Page Default.aspx and add the code given below:
  1. <input type="button" id="getemployees" value="Get Employees" onclick="getEmployees();" />
  2. <div id="output" style="overflow: scroll">
  3. </div>
  4. <input type="button" id="getemployeesbyempcode" value="Get Employees By Code" onclick="GetEmployeesByEmpCode();" />
  5. </br> Select Emp Code:<div id="Div1">
  6. <select id="ddlemployees" onchange="GetEmployeesByEmpCode();">
  7. </select>
  8. </div>
6. Add jquery reference on site.master
  1. <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
7. Now Create a Jquery Function to getEmployees() under Head tag in site.Master:
  1. function getEmployees() {
  3. $.ajax({
  5. type: "POST",
  7. url: "Employees.asmx/GetAllEmployees",
  9. data: "{}",
  11. contentType: "application/json; charset=utf-8",
  13. dataType: "json",
  15. success: function (response) {
  17. var Employees= response.d;
  19. $('#output').empty();
  20. $('#output').append('<table id="tbone"><thead><tr><th style="width:60px">EMPLOYENAME</th><th style="width:60px">EMPCODE</th><th style="width:60px">GENDER</th></tr></thead></table>');
  21. $.each(Employees, function (index, Employee) {
  23. var Name = "empname";
  24. var EmpCode = "empcode";
  25. var Gender = "gender";
  28. $('#output').append('<table><tr><td style="width:60px">' + Employee.empname + '</td><td style="width:60px">' + Employee.empcode + '</td><td style="width:60px">' + Employee.gender + '</td></tr>');
  29. });
  31. },
  33. failure: function (msg) {
  35. $('#output').text(msg);
  37. }
  39. });
  41. }
8. Now Create a Jquery Function to GetEmployeesByEmpCode() under Head tag in site.Master:
  1. function GetEmployeesByEmpCode() {
  3. $.ajax({
  5. type: "POST",
  7. url: "Employees.asmx/GetEmployeesByEmpCode",
  9. data: "{empcode:" + $('#ddlemployees').val() + "}",
  11. contentType: "application/json; charset=utf-8",
  13. dataType: "json",
  15. success: function (response) {
  17. var Employees = response.d;
  19. $('#output').empty();
  20. $('#output').append('<table id="tbone"><thead><tr><th style="width:60px">EmployeeName</th><th style="width:60px">EmpCode</th><th style="width:60px">Gender</th><th style="width:60px">DOORS</th></tr></thead></table>');
  21. $.each(Employees, function (index, Employee) {
  24. $('#output').append('<table><tr><td style="width:60px">' + Employee.empname + '</td><td style="width:60px">' + Employee.empcode + '</td><td style="width:60px">' + Employee.gender + '</td></tr>');
  25. });
  27. },
  29. failure: function (msg) {
  31. $('#output').text(msg);
  33. }
  35. });
OUTPUT after pressing get all employees:

Figure 7
OUTPUT after Selecting empcode from dropdownlist::

Figure 8