Jquery Ajax and Update Panel

Hi,

To whom I should give preference while implementing Ajax. Is it Update Panels OR Jquery Ajax?

In what Scenario, one is good over another.

thanks
meetDinesh

Dinesh KumarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

crisco96Commented:
http://stackoverflow.com/questions/22466/jquery-ajax-vs-updatepanel
http://social.msdn.microsoft.com/Forums/en/architecturegeneral/thread/9128e613-9448-4663-93f5-8929b9e34dca


In general if at all possible use jquery, it will be more lean and cause less strain on the server and the client requesting the page. Update panels basically make a page look like it has ajax but all of the .net code behind still runs (the whole page lifecycle) and the server has to send back all the html for the page. A well written jquery ajax call would only need to return a little html or JSON and then with javascript you would just need to update a small part of the page.

UpdatePanels are good for quick and dirty AJAX when you don't have much time but there's a big performance hit.
0
Dinesh KumarAuthor Commented:
<<In general if at all possible use jquery, it will be more lean and cause less strain on the server and the client requesting the page. Update panels basically make a page look like it has ajax but all of the .net code behind still runs (the whole page lifecycle) and the server has to send back all the html for the page.>>

Only that information goes to server which is kept inside the update panel e.g if I need to update the state only, being states in the dropdown, then I will keep states dropdown only in the update panel and not the whole page and will update this update panel when city dropdown is changed!
0
crisco96Commented:
Yes only the information in the update panel goes to the server, but the server still processes all the code belonging to the page (like page load, pre render, render, etc). If all you're going to do is update a dropdown dynamically then you should use jquery because then all you have to do is call one server side method which should return the state.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

ddayx10Commented:
If you understand how to do AJAX without an <asp:UpdatePanel> then that's pretty much the distinction...use it.

Using an <asp:UpdatePanel> under the simplest of circumstances is fine, except its in-efficient. In my view its just a way to make simple ajax available to the beginner/intermediate programmer.

Aside from all the stuff @crisco96 pointed out you are also going to load a pretty large amount of javascript libraries to make any asp ajax controls function.

Once you try to build more complex or interdependent operations you will start to have problems with asp ajax controls. Its always great to build a bunch of stuff up and then when you add some piece near the end of your plan you find a bug, or you've done some small thing wrong and its a horror trying to resolve.

If you understand Jquery AJAX its almost always the preference.

Otherwise this is kindof a loaded question. There is not going to be some definitive "line in the sand" that can be drawn on when to use one or the other.

EX.

Lets say you have a complex gridview on your page. It does deletes and updates and inserts etc...

Now using Jquery you may know what to do to assign the deletes and updates and inserts to AJAX and make them happen, but how are you going to rebind the gridview after these take place?

If you're answer is "I dunno" and you are short on time and have already invested a lot into the project, and your boss isn't going to give you a hard time about the inefficiencies... then you just surround it with an updatepanel and walk away.

Anyway that's my $.02
0
Dinesh KumarAuthor Commented:
Crsco96 and ddayx10, I see the following thoughts:

crisco96: a) If I use update panel then only i need to put a trigger for the state. b)Does the rendering of the whole page again takes place in case of update panel or only the state dropdown is again rendered?

ddayx10:<< you are also going to load a pretty large amount of javascript libraries to make any asp ajax controls function.>> [they are loaded in case of jquery also.]
0
ddayx10Commented:
>>[they are loaded in case of jquery also.]<<

Just for the sake of discussion. I'm glad you brought it up because I hadn't really looked at this in some time and I am kind of a "kb counting" guy.

Jquery Ajax is going to take approx a constant 90kb. I think its reported to be about 55kb when gzip is in play.

MS Ajax controls (script manager/updatepanel only) are going to be about 50-60kb.

So I think with gzip in play they are about equivalent.

Now start throwing any other <asp:ajax> control into the mix and you will see much larger file sizes come into play.

Just go here and check it out(check headers these are using gzip):
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Imagine throwing 3 or 4 of these on a page at once.

Its not completely equivalent but its a "measuring stick".

So really what I'm comparing here is 1) Jquery AJAX Plain, 2) MS AJAX Plain, and 3) MS AJAX with AjaxControlToolkit Controls.

1 & 2 seem to be virtually equivalent these days.

Its interesting because I used to use AJAX with a scriptmanager only and just use the API to manually write all my AJAX. The one thing that drew me toward Jquery in this area was that AJAX in Jquery had a much smaller footprint (so did just writing it from scrach for yourself for that matter).

Now that Jquery is so large (beyond the most basic builds) you've made me look again at my thinking here. I like the <scriptmanager> API for AJAX quite a lot. Its very flexible and easy to use... and now I see its no bigger than the Jquery version. So unless I'm using Jquery for something else I am fully justified staying with MS AJAX (plain no controls).

I still content that utilizing any of the AJAX controls is usually a mistake except in the most simple situation. One strategically placed control may be ok, but from my experience combining several of them is an expensive and likely frustrating prospect.



0
ddayx10Commented:
You might find this interesting as an addition:

http://encosia.com/why-aspnet-ajax-updatepanels-are-dangerous/

I think its titled poorly, but its a good demonstration of one of the issues of updatepanels. Just the header info demonstration is the point to be made for this discussion.
0
Dinesh KumarAuthor Commented:
The main difference is the page life cycle which don't run in case of jquery and also the response data is less in case of it.

Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.