jQuery with ASP.NET 3.5 SP1

Excerpted from the Wrox blox PDF Download, New Features in ASP.NET 3.5 Service Pack 1

By Wally B. McClure

jQuery

While technically not a feature of .NET 3.5 Service Pack 1, Microsoft announced shortly after the release of Service Pack 1 that the open source jQuery JavaScript library would be included in future versions of Visual Studio. In the meantime, they have released an IntelliSense-encoded version of jQuery, and it has been donated to the jQuery organization. This IntelliSense-encoded file can be used to get full IntelliSense support for jQuery within Visual Studio 2008.

It is impossible to do a complete overview of jQuery in the matter of three to five pages. One of the cool features it provides is the ability to directly call a Web Service without need for the ASP.NET ScriptManager. With jQuery, it handles communication with the Web Service as well as getting the data back and interacting with the result without using the ASP.NET AJAX Script Manager.
Before you delve into the following code example, where the code calls out to the ReturnData method in the GetData.asmx Web Service, let’s look at the parameters that are passed in:

When the document.ready event occurs in jQuery, the code within the defined function is called.
A call is made to a Web Service in AJAX. The call to $.ajax() initiates this.
The type: value is used to set the type to call. In this example, the value is set to POST. As a result, the Web Service is called with a post.
The contentType: value sets the type of data that is being sent between the client and server.
The data: value contains the values that are being passed to the Web Service.
The dataType: value sets the type of data format that is supposed to come back from the server.
On a successful result, the method specified within the success: value is called.

If an error occurs, the method specified by the error: parameter is called.
 

javascript Code: 

<label for="lblOutput">
    Text Out:
</label>
<div id=
"lblOutput" />
<script language=
"javascript" type="text/javascript">
    $
(document).ready(function() {
        $.
ajax({
            type:
"POST",
            contentType:
"application/json; charset=utf-8",
            url:
"GetData.asmx/ReturnData",
            data:
"{i: 47}",
            dataType:
"json",
            success:
function(msg) {
               
var newline = "<br />";
                $
(‘#lblOutput’).html("Name: " + msg.d.Name + newline +
               
"Notes: " + msg.d.Notes + newline +
               
"Passed Value: " + msg.d.PassedValue);
           
}
            error:
function() {
               
alert("An error occurred on the server.");
           
}
       
});
   
});
</script>
</div>
<script language=
"javascript" type="text/javascript">
    $
(document).ready(function() {
        $.
ajax({
            type:
"POST",
            contentType:
"application/json; charset=utf-8",
            url:
"GetData.asmx/ReturnData",
            data:
"{i: 47}",
            dataType:
"json",
            success:
function(msg) { onSuccess(msg); },
            error:
function() {
               
alert("An error occurred on the server.");
           
}
       
});
   
});
   
function onSuccess(msg) {
       
var newline = "<br />";
        $
(‘#lblOutput’).html("Name: " + msg.d.Name + newline +
               
"Notes: " + msg.d.Notes + newline +
               
"Passed Value: " + msg.d.PassedValue);
   
}
</script>

What makes the jQuery library so advantageous is that it integrates with existing ASP.NET AJAX Web Services, and it does not require any of the overhead of the ASP.NET AJAX ScriptManager. While this does not sound like much, every byte of data that does not need to be downloaded helps performance. Figure 5 below shows the output of the sample code.
 

 

Figure 5

The question that I am sure that developers are asking is, “Why would I use jQuery instead of calling through ASP.NET AJAX?” ASP.NET AJAX provides simple and easy support for calling Web Services. That support comes at a price of more information being downloaded from the service to the client browser. jQuery provides support for calling Web Services. However, the development experience is not quite as good. However, the result is a slight improvement in performance in general. This comes about because less material is downloaded to the client browser from the server.
 

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *