Project Management

Web Service Behavior component reduces the overhead of page refreshes

Web application performance often degrades as the number of roundtrip calls increases between the client and server. Microsoft provides a solution, the Web Service Behavior HTML component. Learn how it can enhance the browsing experience for your users.


Web Service Behavior is an HTML component (.HTC) that takes advantage of the SOAP protocol to interact with Web services. It provides a way to call Web service remote methods from a client side script. Let's take a look at how this Web services feature works and how you can adopt it in various places to reduce the overhead of page refreshes and enhance the Web browsing experience for your end users.

Where to get it
Web Services Behavior is available in Microsoft Internet Explorer 5.0 and above. You can download the Web Service Behavior file here.

How it works
Any Web application requires interaction between the client and the server on multiple occasions to retrieve and submit data. This requires page submission or navigation. Using Web Service Behavior, you can accomplish two things: avoid page submits and provide the ability to consume Web services. Avoiding page refreshes enhances the browsing experience for the end user by making pages load faster.

Also, in many situations, only a certain portion of the Web page requires updating. The Web Service Behavior component comes in handy in such situations. Figure A shows an overview of this behavior.

Figure A


Using the component
The steps below summarize how to initialize and use a Web service from a client side script:

Step 1
The WebService.htc file is first attached to an element on the Web page. The HTML component (WebService.htc) internally uses SOAP to communicate with Web services on the server.

The sample HTML fragment below demonstrates how to attach the Web Service Behavior to an HTML element using the style attribute. (If you are using Visual Studio.NET IDE, you should open the .aspx page and switch to the HTML tab.)
 
<div id=divWSBehavior style="behavior: url (webservice.htc)" onresult="GetData()" >
 

The Web Service Behavior is attached to the hidden field txtWSBehavior. Another attribute of importance here is the onresult attribute. The onresult event is triggered by the behavior when the method called returns a result. This attribute points to the function GetData.

When the onresult event is triggered, the function GetData is invoked and, within this function, the result returned is made available. The onresult event is available only to those objects in the document to which the Web Service behavior is attached.

This is a sample template for a probable GetData function:
<script>
function GetData() {
if((event.result.error)&&(iCallID==event.result.id)) {
var xfaultcode = event.result.errorDetail.code;
var xfaultstring = event.result.errorDetail.string;
alert("Error");
} else
{
if (event.result.value == 0) {
divWSBehavior.innerHTML = "Product By that name does not exist.";
} else if(event.result.value == 0)
{
divWSBehavior.innerHTML = "Error: " + xfaultstring;
} else
{
divWSBehavior.innerHTML = event.result.value;
} } }
</script>

 

The event object is accessible from this function. The object is accessible only during an event and can be used only in event handlers. Here, the GetData function is an event handler. The event object exposes various sub-properties. Table A summarizes each sub property that is useful to us in this particular context.
Table A

Property Name

Description

event.result.id

This returns a unique identifier associated with the instance of the method call.

event.result.value

This returns the value of the method call. The data type of the value is determined by the definition of the method in the service description.

event.result.error

This returns a Boolean true/false value indicating whether the method call was successful or not.

event.result.errorDetail.code

This returns an error code.

event.result.errorDetail.string

This returns an error message.


The errorDetail object is available only if an error has occurred. Based on the value returned, the innerHTML property of the div tag is populated.

Step 2
You must download the Webservice.htc file and place it in the same folder (virtual directory) as the Web page. (You can download the file here.)

This step is more of a restriction to enhance the security aspect of using the Web Service Behavior. The HTC file is nothing but script, so using the Web Service Behavior is as good as running script in an HTML page. The level of security isn't equivalent to that offered by ActiveX controls. Having the HTC file and the Web service in the same Internet domain as the HTML page prevents the usage of the service from other domains.

Step 3
The Web service has to be initialized using the useService method before you can utilize it further. The ideal way of doing this to create an InitService function and call the InitService function in the onload event of the body tag, as in the code example below. The service is then initialized once the contents of the page are loaded.
 
<script>
function InitService( ){
divWSBehavior.useService("http://localhost/ProductManager/Pricing.asmx?WSDL","ProductPrice");
}
</script>
<body onload=”InitService()”>
</body>



The first parameter is the path to the Webservice with the ?WSDL query string. The second parameter is a friendly name with which the service is initialized. Once initialized, the friendly name can be used as a reference to the Web service.

Step 4
Once the Web service has been initialized, it's available for use. You can utilize the service like this:
 
function GetProductPrice( ) {
var sProductName;
sProductName = document.frmServer.txtGetPrice.value;
iCallID = divWSBehavior.ProductPrice.callService("GetPrice",sProductName);
}

 

The first parameter to callService is the function name within the Web service.

Sample application
I've included a sample application that you can download. It connects to the Northwind Database of a default SQL Server installation.

The user interface has a textbox and a GetPrice button next to it. Once the user enters a Product name and clicks on the GetPrice button, the price is retrieved from the Products Table in the Northwind Database. C# code for the Pricing Web service is also included with the source code, which you can download here.

Editor's Picks