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!
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=a33305ce-6f70-4102-bdd0-79c05f8bc481)
| Tweet |
author: Aleš Rosina | Comments: 35 | Tags: c-sharp, asp-net, jquery
February
2010
končn en zanimiv post :)
this example works only is the service is on the same server. how do i load a remote service? i am lost... is there a way to do it? i am struggling since a week on this problem
Interesting Article. I am not aware of the deference of jQuery vs. ScriptManager in ASP.NET. In my case JQuery is my best choice
I think that I am doing the same thing that you describe here.
I get the following error:
Message: Object doesn't support this property or method
Line: 12
Char: 5805
Code: 0
URI: ajax.googleapis.com/.../jquery.min.js
Any thoughts on what I might be missing.
hey Nick, can you give me a little bit more info about your error? Some code would be nice, otherwise I cannot help you.
Good exemple but I can't fix the issue, do you have some news from Nick problem?
I think jQuery simply supersedes Scriptmanager in all respects and that is primarily because of the fact that jQuery is having stunning UI effects which I think could be a sole reason why many has turned towards jQuery. As an added feature of jQuery, UI effects are really something the future vests upon and hence I think that even if the Scriptmanager is having issues with jQuery, jQuery will always be the principal choice!
I have a question about serviceProxy. I built my website. At first it's local calls to my server using WCF in a serviceProxy. It's simple - call a list of U.S. and populates a drop down HTML select.
I preloaded serviceproxy.js jquery.js and the administrator of ASP script on the home page. In the page behind where I call the WCF, I load the external callusa.js file - in that Call callusa.js file that includes a reference to jquery.js
It works fine locally - but when I can deploy my application, I get an undefined error. Seems to be failing to serviceProxy global variable and wonder if anyone else has the same problem? If you have a sample project with a homepage that would be grateful, because I think I'm missing something when it comes to implementing the project ....
I tried to use jQuery and asp.net Ajax JavaScript me wrong, but when the page through IIS, but not when I debug. I use ASP <asp:ScriptManager> way and use jQuery as the 1.3.1.js: ScriptReference and Service.svc for the ASP: the ServiceReference
Service.svc App_Code folder called My Files Service.cs object.
I do not understand why I have no problem, you can run this code, debug, but the production on the project is not the first code.
Regards Andrew
Great article,
I don't like ScriptManager at all. I think Microsoft tries to abstract developers from web native environement (HTML, CSS, and JavaScript) which is an absurd task. Development through jQuery is not difficult at all.
Anyway, in <a href='http://www.thoughtresults.com/webform-sucks-mvc-rocks'>Web From Sucks - MVC Rocks</a> I try to bring a list of bad points Microsoft introduced into the field of web-development.
Your internet site is invariably one of the most efficient . As a whole impression of the site is probably delightful .
Your service is generally one of the most effective . All round effect of the blog is actually delightful .
Pretty unobjectionable group. I upstage stumbled aloft your diary and municipality to say that I win utterly enjoyed invoice your writing posts. Any way I ll be subscribing to your augment and I challenge you contour afresh shortly. <a href="http://www.diamondglobalsales.com">diamond for sale</a> | <a href="http://www.londoninternetagency.com">internet marketing agency</a>
I always like to know some important things. So i adhere to this site for collecting some important and useful article for post and sharing with some of my friends. I like this article. its so nice.
I read all and think about. As a whole impression of the site is probably delightful .Read more t developers from web native environement (HTML, CSS, and JavaScript) which is an absurd task. Development through jQuery is not difficult at all.Read more!
This is a very informative article.I was looking for these things and here I found it.
I like concept of your post. Very creative post. Best of luck and waiting for some new ideas
Now this kind of particulars are very well worth looking for, straight answers for site visitors together with something to suit your needs as will definitely show the conventional in the author.
Now this kind of particulars are very well worth looking for, straight answers for site visitors together with something to suit your needs as will definitely show the conventional in the author.
this is very nice.
this is very nie.
Pretty unobjectionable group. I upstage stumbled aloft your diary and municipality to say that I win utterly enjoyed invoice your writing posts. Any way I ll be subscribing to your augment and I challenge you contour afresh shortly.
jQuery is a cross-browser JavaScript library designed to simplify client-side scripting for HTML. It was published in January 2006 BarCamp NYC by John Resig. Used by more than 49% of the 10,000 most visited sites, jQuery is a JavaScript library most popular in use today.
I’ve been browsing on-line greater than 3 hours lately, but I by no means discovered any fascinating article like yours. It is beautiful value enough for me. In my opinion, if all website owners and bloggers made good content as you probably did, the net will be a lot more helpful than ever before.
The code here is an excellent help for me.
I am really impressed by this blog. I have always found it informative and updated
<a href="http://consumersreviewsratings.com/">consumer ratings</a>
I am really impressed by this blog. I have always found it informative and updated
I like concept of your post. Very creative post.it helps me so much in my article writing thanks for posting
I like concept of your post. Very creative post.it helps me so much in my article writing thanks for posting
Everyone has heard of: <a href="http://www.dimshoes.com">ugg</a>. The boots are sheepskin, so very good which you run them to always desire to maintain.
jQuery and ScriptManager difference made over here taking much inspiration.
Ultimately, a problem that I'm passionate about. I've looked for information of this caliber for the very last various hrs. Your website is significantly appreciated.
Can I simply say what a reduction to seek out somebody who actually knows what theyre talking about on the internet. You definitely know how to carry an issue to light and make it important. More people need to read this and perceive this aspect of the story. I cant imagine youre not more common because you undoubtedly have the gift.very good publish, i definitely love this web site, keep on it
Hey, Great job! This is very much helpful for my research and i hope to run through more of your posts someday! How i wish i can see you in person so i can get to know you more.
Hey, Great job! This is very much helpful for my research and i hope to run through more of your posts someday! How i wish i can see you in person so i can get to know you more.
