December 22, 2014
Hot Topics:

Consuming Web Service Using ASP.NET AJAX

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

Next, add a web method called GetEmployee() as follows:

[WebMethod]
public Employee GetEmployee(int pEmployeeId)
{
   SqlConnection cnn = new SqlConnection(strConn);
   cnn.Open();
   SqlCommand cmd       = new SqlCommand();
   cmd.Connection       = cnn;
   cmd.CommandText      = "select employeeid,firstname,lastname
                           from employees where employeeid=@id";
   SqlParameter id      = new SqlParameter("@id", pEmployeeId);
   cmd.Parameters.Add(id);
   SqlDataReader reader = cmd.ExecuteReader();
   Employee emp         = new Employee();
   while (reader.Read())
   {
      emp.EmployeeID = reader.GetInt32(0);
      emp.FirstName  = reader.GetString(1);
      emp.LastName   = reader.GetString(2);
   }
   reader.Close();
   cnn.Close();
   return emp;
}

The GetEmployee() web method accepts an employee ID that is to be returned. The code is very similar to the previous code but this time it fetches only one employee. Note that you used SqlParameter to represent the passed EmployeeID.

Now you can add the Insert(), Update(), and Delete() web methods as follows:

[WebMethod]
public int Insert(string pFirstName, string pLastName)
{
   SqlConnection cnn  = new SqlConnection(strConn);
   cnn.Open();
   SqlCommand cmd     = new SqlCommand();
   cmd.Connection     = cnn;
   cmd.CommandText    = "insert into employees(firstname,lastname)
                         values (@fname,@lname)";
   SqlParameter fname = new SqlParameter("@fname", pFirstName);
   SqlParameter lname = new SqlParameter("@lname", pLastName);
   cmd.Parameters.Add(fname);
   cmd.Parameters.Add(lname);
   int i = cmd.ExecuteNonQuery();
   cnn.Close();
   return i;
}
[WebMethod]
public int Update(int pEmployeeId,string pFirstName, string pLastName)
{
   SqlConnection cnn  = new SqlConnection(strConn);
   cnn.Open();
   SqlCommand cmd     = new SqlCommand();
   cmd.Connection     = cnn;
   cmd.CommandText    = "update employees set firstname=@fname,
                         lastname=@lname where employeeid=@id";
   SqlParameter fname = new SqlParameter("@fname", pFirstName);
   SqlParameter lname = new SqlParameter("@lname", pLastName);
   SqlParameter id = new SqlParameter("@id", pEmployeeId);
   cmd.Parameters.Add(fname);
   cmd.Parameters.Add(lname);
   cmd.Parameters.Add(id);
   int i = cmd.ExecuteNonQuery();
   cnn.Close();
   return i;
}
[WebMethod]
public int Delete(int pEmployeeId)
{
   SqlConnection cnn = new SqlConnection(strConn);
   cnn.Open();
   SqlCommand cmd  = new SqlCommand();
   cmd.Connection  = cnn;
   cmd.CommandText = "delete from employees where employeeid=@id";
   SqlParameter id = new SqlParameter("@id", pEmployeeId);
   cmd.Parameters.Add(id);
   int i = cmd.ExecuteNonQuery();
   cnn.Close();
   return i;
}

The Insert() web method accepts the first name and last name of the employee to be added. It then creates an instance each of SqlConnection and SqlCommand and executes the INSERT statement using the ExecuteNonQuery() method of the SqlCommand object. Similarly, the Update() web method accepts the employee ID to be updated, along with new values for first name and last name, and fires an UPDATE statement. Finally, the Delete() web method accepts an employee ID that is to be deleted and fires a DELETE statement.

This completes your web service. To this point, you have not done anything specific to AJAX functionality. Now, it's time to do just that. Modify your web service class definition as follows:

using System.Web.Script.Services;
...
...
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
   ...
   ...

Notice the lines marked in bold. You have imported a namespace System.Web.Script.Services, which comes from the System.Web.Extensions assembly. The [ScriptService] attribute you'll use later is supplied by this namespace. The [ScriptService] attribute enables the web service to be called from the client-side JavaScript (i.e., ASP.NET AJAX).

That's it! You are now ready to consume your web service from ASP.NET AJAX.

How to Consume the Web Service

In this section, you will create a web form that acts as a data entry page for the Employees table by consuming the web service you just created. To begin, add a new web form called EmployeeServiceClient.aspx to the web site. Open the toolbox by selecting the View > Toolbox menu option. On the toolbox, locate a node titled AJAX Extensions (see Figure 2).

Figure 2: The New Web Site Dialog with Added Templates

The AJAX Extensions node displays all the ASP.NET AJAX components that you can use on a web form. Drag and drop a ScriptManager component on the web form. Every web form making use of ASP.NET AJAX needs one ScriptManager component. Open the properties window for the ScriptManager. Locate its Services property and open the Service Reference collection editor as shown in Figure 3.



Click here for a larger image.

Figure 3: The Service Reference Collection Editor

Click the Add button at the bottom of the dialog and set the Path property to the virtual path of the web service (in other words, EmployeeService.asmx). This will generate the following markup in the web form file:

<asp:ScriptManager ID="ScriptManager1" runat="server" >
   <Services>
      <asp:ServiceReference Path="EmployeeService.asmx" />
   </Services>
</asp:ScriptManager>

For each web service that you want to consume, you need one <asp:ServiceReference> element inside the <asp:ScriptManager> section. The <asp:ServiceReference> tag registers a web service to use in the current web form.





Page 2 of 4



Comment and Contribute

 


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

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel