jQuery with ASP.NET 3.5 SP1

Excerpt from New Features in ASP.NET 3.5 Service Pack 1

By Wally B. McClure

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.

<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 shows the output of the sample code.

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 *