Post
Ask Question

Creating Simple WebService in ASP.NET

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() {    
  2.   
  3.     $.ajax({    
  4.   
  5.         type: "POST",    
  6.   
  7.         url: "Employees.asmx/GetAllEmployees",    
  8.   
  9.         data: "{}",    
  10.   
  11.         contentType: "application/json; charset=utf-8",    
  12.   
  13.         dataType: "json",    
  14.   
  15.         success: function (response) {    
  16.   
  17.             var Employees= response.d;    
  18.   
  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) {    
  22.   
  23.                 var Name = "empname";    
  24.                 var EmpCode = "empcode";    
  25.                 var Gender = "gender";    
  26.   
  27.   
  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.             });    
  30.   
  31.         },    
  32.   
  33.         failure: function (msg) {    
  34.   
  35.             $('#output').text(msg);    
  36.   
  37.         }    
  38.   
  39.     });    
  40.   
  41. }  
8. Now Create a Jquery Function to GetEmployeesByEmpCode() under Head tag in site.Master:
  1. function GetEmployeesByEmpCode() {    
  2.   
  3. $.ajax({    
  4.   
  5.     type: "POST",    
  6.   
  7.     url: "Employees.asmx/GetEmployeesByEmpCode",    
  8.   
  9.     data: "{empcode:" + $('#ddlemployees').val() + "}",    
  10.   
  11.     contentType: "application/json; charset=utf-8",    
  12.   
  13.     dataType: "json",    
  14.   
  15.     success: function (response) {    
  16.   
  17.         var Employees = response.d;    
  18.   
  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) {    
  22.   
  23.   
  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.         });    
  26.   
  27.     },    
  28.   
  29.     failure: function (msg) {    
  30.   
  31.         $('#output').text(msg);    
  32.   
  33.     }    
  34.   
  35. });   
OUTPUT after pressing  get all employees:
 
 
Figure 7
 
OUTPUT after Selecting empcode from dropdownlist:: 
 
 
Figure 8
Next Recommended Reading Creating A Simple Registration Form In ASP.NET