HOW TO: Use a Web Service as a Data Source for a Client Application in JScript .Net (308497)

SUMMARY

This step-by-step article demonstrates how to create and test a Web service that returns a DataSet object to a client. This article also demonstrates how to reference the Web service in a client application and display the returned DataSet in a DataGrid control.

The sample code in this article:

• Permits the user to select a subset of the records by typing a character string into a text box on the form.
• Uses the String.Replace method to demonstrate correct escaping of literal SQL statement parameters.
• Demonstrates how to pass parameters to the Web service, and also how to retrieve data.
• Demonstrates how to link parent and child records in a single DataSet, and also how to bind to the grid to permit hierarchical navigation.

The code samples in this article use http://localhost as the Web server. The code samples also use the Northwind database, which is included with Microsoft SQL Server as the backend database.

back to the top

Create the Web Service

1. Open Notepad.
   
   NOTE: Because there is no designer (IDE) support for JScript .Net, use Notepad as the editor.
2. Add the following code:

   <%@ WebService debug="true" Language="JS" Class="Service1" %>
   
   import System;
   import System.Data;
   import System.Data.SqlClient;
   import System.Web.Services;
   
   public class Service1
   {
     
     WebMethodAttribute public function GetCustOrders(IDMask:String):DataSet
     {
        //IDMask is the Customer ID that the client submits.
        //Replace single quotation marks with two single quotation marks so that all single quotation marks in the CustomerID are parsed correctly.
        IDMask = IDMask.replace("'","''");
   
        //Modify this connection string to use your SQL Server and log on information.
        var con:SqlConnection = new SqlConnection("Server=server;uid=login;pwd=password;database=northwind");
   
        //Open the Customers table to serve as the parent table.
        var daCust:SqlDataAdapter = new SqlDataAdapter("Select * From Customers Where CustomerID Like '%" + IDMask + "%'", con);
        //Open the Orders table to serve as the child table.
        var daOrders:SqlDataAdapter = new SqlDataAdapter("Select * From Orders Where CustomerID Like '%" + IDMask + "%'", con);
        //Create a client-side DataSet to hold the Customers and Orders tables.
        var ds:DataSet = new DataSet();
        //Explicitly open the connection to allow explicit closing.
        con.Open();
   
        //Fill the DataSet with the Customers table and the Orders table.
        daCust.Fill(ds, "Cust");
        daOrders.Fill(ds, "Orders");
   
        //Explicitly close the connection - do not wait for garbage collection.
        con.Close();
   
        //Relate Customers to Orders.
        ds.Relations.Add("CustOrd", ds.Tables["Cust"].Columns["CustomerID"],
        ds.Tables["Orders"].Columns["CustomerID"]);
        //The relationship is Orders nested in Customers.
        ds.Relations[0].Nested = true;
   
        //Return the DataSet to the client.
        return ds;
    }
     
   }

3. Modify the SqlConnection string as appropriate for your environment.
4. Create a folder that is named jsCustomer under the wwwroot directory of your Web server, name the Notepad file Service1.asmx, and then save the file to this folder.

back to the top

Test the Web Service

1. From your Web browser, open the following page:

   http://localhost/jsCustomer/Service1.asmx

   A Web page is returned that permits you to interact with the Web service.
2. On the Service1 Web page, click GetCustOrders. A Web page is returned that displays details about the GetCustOrders Web method.
   
   Note that the URL of the returned page is http://localhost/jsCustomer/Service1.asmx?op=GetCustOrders
3. In the Text section of the GetCustOrders page, type AL in the Value text box next to the IDMask parameter.
4. Click Invoke. A Web page is returned that displays the results of the GetCustOrders Web method as a hierarchical XML document.
   
   Note that the URL of the returned page is http://localhost/jsCustomer/Service1.asmx/GetCustOrders?IDMask=AL
5. Close the displayed Web pages.

back to the top

Create the Web Service Proxy Class for the Client Application

For Visual Basic .Net and Visual C# .Net Client Windows applications that have the designer (IDE) support, adding a Web reference to the service that is created in the earlier steps makes sure that the proxy class that you need is automatically generated and is included in the project. However, because there is no designer support for JScript .Net, the proxy class must be generated manually and must be compiled into an assembly that the client application can then reference.

1. Generate the proxy class from a command prompt by using the Web Services Description Language tool (Wsdl.exe) that is included with the .Net Framework:
   
   WSDL /language:js /out:"c:\.NetClientApp\jsCustomer\Service1.js" http://localhost/jscustomer/Service1.asmx
   
   This creates Service1.js in JScript language (a client proxy class) in the directory that is specified by the /out: parameter.
2. To compile the proxy class into an assembly, run the following from a command prompt:
   
   JSC /t:library c:\.NetClientApp\jsCustomer\Service1.js
   
   This compiles Service1.js proxy class into an assembly (Service1.dll), and then places the assembly in the same directory as the proxy class.

back to the top

Create the Client Application

1. Open Notepad, and then add the following code:

   import System;
   import System.Windows.Forms;
   import System.Drawing;
   
   class Test extends Form
   {
   	//Declare Datagrid, TextBox, and Button variable.
            var dg : DataGrid = new DataGrid();
   	var tb : TextBox = new TextBox();
   	var bn : Button = new Button();
   
   	function Test()
   	{
   	       //Add the DataGrid control to the form, and then set the location and the size for the control.
                   Controls.Add(dg);
                   dg.Location = new Point(40,36);
                   dg.Size = new System.Drawing.Size(230,140);
   
   	       //Add the TextBox control to the form, and then set the location and the size for the control.
                   Controls.Add(tb);
                   tb.Location = new Point(40,184);
                   tb.Size = new System.Drawing.Size(230,20);
   		
                   //Add the Button control to the form, and then set the location, the size and the text for the control.
                   Controls.Add(bn);
                   bn.Location = new Point(40,216);
                   bn.Size = new System.Drawing.Size(230,20);
                   bn.Text = "Enter a Search String above and Click me";
   
                   //Call function to handle Button Click event
                   bn.add_Click(button_ClickHandler);
   
   	}
   
   	function button_ClickHandler(o : Object, e : EventArgs)
   	{
                   //Declare an instance of the Web service.
                   var MyService = new Service1();
                   //Set the Data Set that is returned by the Web Service as the Data Source for the DataGrid.
                   dg.DataSource = MyService.GetCustOrders(tb.Text);
                   //Set the Data Set member that the DataGrid needs to bind to.
                   dg.DataMember = "Cust"; 
   	}
   }
   
   Application.Run(new Test);

2. Save the Notepad file as Client.js in the same directory as the proxy class.

back to the top

Test the Client Application

1. Compile the Client application by using the JScript .Net command-line compiler:
   
   JSC /t:winexe /out:Client.exe /r:Service1.dll Client.js
   
   This compiles Client.js by referencing the assembly Service1.dll, and creates a Windows application (Client.exe) in the same directory.
2. Run the Windows application that is named Client.exe
3. Type AL in the text box.
4. Click Button. Notice that DataGrid displays the Customer records that contain "AL" in the CustomerID field.
5. In DataGrid, click the plus sign (+) next to ALFKI to display the CustOrd relation that you defined in the Web method.
6. Click CustOrd to display the Orders that are related to the Customers by CustomerID ALKFI.

back to the top