August 19, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Consuming Web Service Using ASP.NET AJAX

  • February 5, 2007
  • By Bipin Joshi
  • Send Email »
  • More Articles »

Now, design the web form as shown in Figure 4.


Figure 4: Design the Web Form

The web form consists of a dropdown (<SELECT>) that lists all the existing employee IDs. Once you select a specific ID, details of that employee are displayed in the two textboxes. You then can update them. To add an employee, you simply need to enter the first name and last name and click the Insert button. Similarly, you can delete an employee by selecting employee ID in the dropdown and clicking the Delete button. A success or failure message is displayed once the INSERT, UPDATE, or DELETE operation is over. The following is the complete markup of the web form:

<table>
   <tr>
      <td colspan="2">
         <asp:Label ID="Label4" runat="server" Font-Size="X-Large"
                    Text="Employee Management">
         </asp:Label></td>
   </tr>
   <tr>
      <td style="width: 100px">
         <asp:Label ID="Label1" runat="server"
                    Text="Employee ID :"></asp:Label></td>
      <td style="width: 100px">
         <select id="Select1" >
         </select>
      </td>
   </tr>
   <tr>
      <td style="width: 100px">
         <asp:Label ID="Label2" runat="server"
                    Text="First Name :"></asp:Label></td>
      <td style="width: 100px">
         <input id="Text1" type="text" /></td>
   </tr>
   <tr>
      <td style="width: 100px">
         <asp:Label ID="Label3" runat="server"
                    Text="Last Name :"></asp:Label></td>
      <td style="width: 100px">
         <input id="Text2" type="text" /></td>
   </tr>
   <tr>
      <td align="center" colspan="2">
         <input id="Button3" type="button" value="Insert" />
         <input id="Button4" type="button" value="Update" />
         <input id="Button5" type="button" value="Delete" />
      </td>
   </tr>
   <tr>
      <td align="center" colspan="2">
         <span id="lblMsg" style="font-weight: bold;
               color: red;"></span>
      </td>
   </tr>
</table>

Notice one important thing: You did not use ASP.NET server controls such as DropDownList, TextBox, and Button. Instead, you used traditional HTML controls such as <SELECT> and <INPUT>. This is because you want to call your web service from client-side JavaScript and not from server-side code. Also, notice the <SPAN> tag at the bottom. It will be used for displaying success or failure messages.

Next, add a <script> section inside the <head> HTML element. Add a function called CallWebMethod() as shown below:

function CallWebMethod(methodType)
{
   switch(methodType)
   {
      case "select":
         EmployeeService.GetEmployees(FillEmployeeList,ErrorHandler,
                                      TimeOutHandler);
         break;
      case "selectone":
         var select=document.getElementById("Select1");
         var empid=select.options[select.selectedIndex].value;
         EmployeeService.GetEmployee(empid,DisplayEmployeeDetails,
                                     ErrorHandler,TimeOutHandler);
         break;
      case "insert":
         var text1=document.getElementById("Text1");
         var text2=document.getElementById("Text2");
         EmployeeService.Insert(text1.value,text2.value,
                                InsertEmployee,ErrorHandler,
                                TimeOutHandler);
         break;
      case "update":
         var select=document.getElementById("Select1");
         var empid=select.options[select.selectedIndex].value;
         var text1=document.getElementById("Text1");
         var text2=document.getElementById("Text2");
         var emp=new Employee();
         emp.EmployeeID=empid;
         emp.FirstName=text1.value;
         emp.LastName=text2.value;
         EmployeeService.Update(empid,text1.value,text2.value,
                                UpdateEmployee,ErrorHandler,
                                TimeOutHandler);
         break;
      case "delete":
         var select=document.getElementById("Select1");
         var empid=select.options[select.selectedIndex].value;
         EmployeeService.Delete(empid,DeleteEmployee,ErrorHandler,
                                TimeOutHandler);
         break;
   }
}

The CallWebMethod() function is a central function that makes calls to the web service. The function accepts a string parameter indicating the method to be called and then calls that method. It contains a switch statement that checks off the method to be called. Each case block calls one web method. Notice how the web method has been called. The ASP.NET AJAX framework automatically creates a JavaScript proxy class for the web service. The proxy class has the same name as the web service. So, the EmployeeService in the above code is not the actual web service class but a JavaScript proxy class. The proxy contains all the web methods of the original web service. In addition to the original web method parameters, each method can have three extra parameters.

The first extra parameter is a JavaScript function that should be called when the web method call is successfully completed. Remember that any AJAX communication between client and server is asynchronous. Hence, this function is necessary to capture the return value of the web method. The second parameter is a JavaScript function that is called in the event of error. Finally, the third extra parameter is a JavaScript function that is called if a timeout occurs during the web method call.

In the first case ("select"), you simply call the GetEmployees() method. In the second case ("selectone"), you call the GetEmployee() method. The employee ID is picked up from the dropdown using traditional JavaScript code. Similarly, the third, fourth, and fifth case blocks call the Insert(), Update(), and Delete() methods, respectively.

The above code uses five JavaScript functions that are called when the respective web method calls are successful: FillEmployeeList(), DisplayEmployeeDetails(), InsertEmployee(), UpdateEmployee(), and DeleteEmployee(). Each of these functions accepts a single parameter that represents the return value of the corresponding web method:

function FillEmployeeList(result)
{
   var select=document.getElementById("Select1");
   for(var i=0;i<result.length;i++)
   {
      var option=new Option(result[i].EmployeeID,
                            result[i].EmployeeID);
      select.options.add(option);
   }
}
function DisplayEmployeeDetails(result)
{
   var text1=document.getElementById("Text1");
   var text2=document.getElementById("Text2");
   text1.innerText=result.FirstName;
   text2.innerText=result.LastName;
   var lblMsg=document.getElementById("lblMsg");
   lblMsg.innerText="";
}
function InsertEmployee(result)
{
   if(result>0)
   {
      var lblMsg=document.getElementById("lblMsg");
      lblMsg.innerText="Employee added successfully!";
   }
   else
   {
      var lblMsg=document.getElementById("lblMsg");
      lblMsg.innerText="Error occurred while adding new employee!";
   }
}
function UpdateEmployee(result)
{
   if(result>0)
   {
      var lblMsg=document.getElementById("lblMsg");
      lblMsg.innerText="Employee updated successfully!";
   }
   else
   {
      var lblMsg=document.getElementById("lblMsg");
      lblMsg.innerText="Error occurred while updating the employee!";
   }
}
function DeleteEmployee(result)
{
   if(result>0)
   {
      var lblMsg=document.getElementById("lblMsg");
      lblMsg.innerText="Employee deleted successfully!";
   }
   else
   {
      var lblMsg=document.getElementById("lblMsg");
      lblMsg.innerText="Error occurred while deleting employee!";
   }
}

The FillEmployeeList() function receives an array of Employee objects as a parameter. Recollect that your GetEmployees() web method returns an array of Employee objects. It then iterates through the array. With each iteration, a new OPTION element is created and added to the dropdown (in other words, <SELECT>). The DisplayEmployeeDetails() function receives an Employee object containing details about an employee. It simply displays those details in the two textboxes. The InsertEmployee(), UpdateEmployee(), and DeleteEmployee() functions receive an integer indicating the number of records affected by the INSERT, UPDATE, and DELETE operations, respectively. A result greater than zero indicates success and they display a success message in the <SPAN> tag. Otherwise, they display an error message. When your page is displayed for the first time, you need to populate the dropdown list with the existing employee IDs. This is done by calling the CallWebMethod() method in a special function named pageLoad():

function pageLoad()
{
   CallWebMethod("select");
}




Page 3 of 4



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel