Create Efficient UIs

Figure 2. In applications where multiple columns need to be displayed to a user in a scrollable area, you can embed a DataGrid within a scrollable div. The code shown in this figure demonstrates how to bind a DataGrid to a data source and place the resulting grid columns into a div that has its CSS overflow property set to auto (for auto scrolling).

Instead of linking the CustomerID column in the DataGrid (see Figure 1) to a different page or even the same page, the link calls a local JavaScript function named GetCustomerData (see the bold section in Figure 2), which fires up the WebService behavior embedded in the page using the techniques I described earlier. The GetCustomerData JavaScript method accepts the CustomerID value and passes this value to the WebService behavior, which in turn calls the actual GetCustomerData Web Service method:

function GetCustomerData(customerID) {

  ChangeCursor("wait");

  //Call actual Web Service using the WebService Behavior

  wsCallID = webService.wsSend.callService(onWSGetCustomerData,

             "GetCustomerData", customerID);

}

Back on the server, the GetCustomerData Web Service method simply queries a SQL Server database for the appropriate customer data and returns a DataSet to the caller:

[WebMethod]

public DataSet GetCustomerData(string customerID) {

  string sql =

   "SELECT * FROM CustomersWS WHERE CustomerID='" +

   customerID + "'";

  SqlConnection dataConn = new SqlConnection(connStr);

  SqlDataAdapter adap = new SqlDataAdapter(sql,dataConn);

  DataSet ds = new DataSet();

  adap.Fill(ds,"CustomersWS");    

  return ds;

}

Once the call to the Web Service method completes, the onWSGetCustomerData event handler in the Web page's JavaScript is fired and the returned DataSet data is accessed. Because DataSets are returned as XML, you can load them on the client side into a DOMDocument object to access the nodes. The code in Figure 3 shows how to load the returned XML into a DOMDocument object.

function onWSGetCustomerData(result) {

   if (result.error) {

    //Pull the error information from the

    //result.errorDetail properties

    var xfaultcode   = result.errorDetail.code;

    var xfaultstring = result.errorDetail.string;

    var xfaultsoap   = result.errorDetail.raw;

    alert("Error returned from Web Service: " +

              xfaultcode + " " + xfaultstring);

  } else if (!result.error) {  //Access returned data

    var returnData = new ActiveXObject("MSXML2.DOMDocument");

    returnData.async = false;

    //Assign data returned from the Web Service to

    //the DOMDocument

    returnData.documentElement = result.value;

     BindCustomerData(returnData);

    returnData = null;

  }

  ChangeCursor("default");

}

Figure 3. The onWSGetCustomerData client-side callback function is called when the GetCustomerData Web Service method completes. The Web Method returns a DataSet that is loaded into a DOMDocument object on the client side.

Once the DataSet data is loaded into the DOMDocument, a JavaScript method named BindCustomerData is called, which reads the XML and binds it to text-box controls on the page. You can accomplish this easily by walking through the DOM structure (see Figure 4).

function BindCustomerData(xmlData) {

  document.all.spanMessage.innerText = "";

  document.all.tblCustomerData.style.display = "block";

  document.all.btnSubmitInsert.disabled = true;

  document.all.btnSubmitUpdate.disabled = false;

  document.all.btnSubmitDelete.disabled = false;

  var customers =

    xmlData.selectSingleNode("//CustomersWS");

  if (customers != null) { //Make sure we found the node

    for (var i=0;i

      var childNode = customers.childNodes(i);

      //Add each text node value in the XML to the proper

      //textbox in the HTML.

      if (document.all("dc" + childNode.nodeName)) {

        document.all("dc" +

          childNode.nodeName).value = childNode.text;

      }

    }

  }

}

Figure 4. XML data returned from calling a remote Web Service can be bound to client-side controls by walking through a DOM structure programmatically. The BindCustomerData method shown here accepts a DOMDocument object as a parameter and binds the data within the object to controls on the page.

By clicking on a CustomerID link in the DataGrid, users can display any customer's data quickly and easily without a round trip to the Web server and the accompanying refresh, giving the user a more client/server feel to the application.

Performing an insert, update, or delete operation to the customer data is accomplished in a similar manner by using the WebService behavior. First, a JavaScript method is called, which creates an XML document from the data in the different text boxes. This document is then passed to a Web Service method named UpdateCustomerData using the WebService behavior. UpdateCustomerData then parses the XML and performs the appropriate update, insert, or delete operation on the database.

By thinking creatively, you'll find you can use the WebService behavior in many ways within your intranet to make the process of working with data much more pleasant and efficient for users. Although one potential example of using the behavior has been demonstrated in this article, the sky's the limit - there are many other ways you can use the WebService behavior to perform useful tasks.

To see a live demo of the WebService behavior application discussed in this article, visit the XML for ASP.NET Developer's Web site at http://www.xmlforasp.net/codeSection.aspx?csID=67.

The files referenced in this article are available for download.

Dan Wahlin is president of Wahlin Consulting and founded the XML for ASP.NET Developers Web site (http://www.xmlforasp.net), which focuses on using XML and Web Services in Microsoft's .NET platform. He also is a corporate trainer and speaker and teaches XML and ASP.NET training courses around the United States. Dan co-authored Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), and authored XML for ASP.NET Developers (Sams). E-mail Dan at mailto:[email protected].

Tell us what you think! Please send any comments about this article to [email protected]. Please include the article title and author.