jQuery vs. ScriptManager in ASP.NET

 

There are a lot of discussions around web, why using one and why not the other one. My reason was pretty simple: I wanted a lot of cool UI effects, that are already part of jQuery. At first I thought, OK, no problem, I’ll just include both of them on my site. But … there are some cases, where jQuery and ScriptManager just don’t get along and why including two different libraries with the same functionalities?

So I did run a very simple test – wrote the same functionality for both cases. Since the test is very simple, it’s hard to make any conclusions, but the jQuery version was more than half size than ScriptManager version. The problem is, that for jQuery version you need to write more code by hand, but sometimes that’s good, because you have more control over what’s going on.

Let’s take a look at both cases (download code here) – ScriptManager is very simple, just drag on website ScriptManager, UpdatePanel with one Button and Label and UpdateProgress with one label. On Button_click event just change text in Label, and you’re done. No big deal, your AJAX enabled site is done!

jQuery version is on the other hand a little bit more tricky, so let’s go step by step. First, add new html site and let’s add a jquery script reference:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

It’s recommended to include jQuery from Google servers, for 3 major reasons: decreased latency, increased parallelism, and better caching. Why, read here. Anyway, now we need to manually add a few divs, spans and a button. Like this:

<div id="UpdatePanel1"> 
<input type="button" name="Button1" value="Button" id="Button1" /> 
<span id="Label1">Label</span> 
</div> 
<div id="UpdateProgress1" style="display:none;">loading.....</div> 

Names are the same as in first example. OK, so here comes the tricky part – how the hell can we create server side code? Easy, with web services. So create new WebService1.asmx file and create new method Test().

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{

    [WebMethod]
    public string Test()
    {
        return "testing testing.";
    }
}

Let’s stop here for a moment - [System.Web.Script.Services.ScriptService] signature is very important, since this will tell service, that it’s supposed to return JSON and not XML. With [WebMethod] we expose method to web service. What about client side? Simple, just use jQuery’s .ajax() method like this:

$(document).ready(function () {
    $("#Button1").click(function () {
        $("#UpdateProgress1").show();
        $.ajax({
            type: "POST",
            url: "WebService1.asmx/Test",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                $("#Label1").html(msg.d);
                $("#UpdateProgress1").hide();
            }
        });
    });
});

So when we click on button, first let’s show “loading” sign and than call web service. When the service returns result, success function will be triggered. This is where we show up result in a <span> and hide loading bar.




As you can see, it’s a little bit more work than normal, but you will gain a lot – even in this simple example was the jQuery version (upper picture) more than twice smaller than ScriptManager version (lower picture). Not to mention, that you’ll get much nicer code and a very popular JavaScript library with a lot of other useful functions, like manipulating with elements, CSS properties and much more.

If you have a small project, where you don’t care about size, use ScriptManager, since it’s much faster to develop with. But if you need some cool effects and better performance, than use jQuery.

You can download source code for those two examples here.

Have any thoughts? Leave a comment!

author: Aleš Rosina | Comments: 6 | Tags: c-sharp, asp-net, jquery