Easy way to AJAX WebControls

Question

I've got a web application that I'm trying to optimize. Some of the controls are hidden in dialog-style DIVs. So, I'd like to have them load in via AJAX only when the user wants to see them. This is fine for controls that are mostly literal-based (various menus and widgets), but when I have what I call "dirty" controls - ones that write extensive information to the ViewState, put tons of CSS or script on the page, require lots of references etc - these are seemingly impossible to move "out of page", especially considering how ASP.NET will react on postback.

I was considering some kind of step where I override Render, find markers for the bits I want to move out and put AJAX placeholders in there, but not only does the server overhead seem extreme, it also feels like a complete hack. Besides, the key element here are the dialog boxes that contain forms with validation controls on them, and I can't imagine how I would move the controls and their required scripts.

In my fevered imagination, I want to do this:

AJAXifier.AJAXify(ctlEditForm);

Sadly, I know this is a dream.

How close can I really get to a quick-and-easy AJAXification without causing too much load on the server?

Answer 1

Check out the RadAjax control from Telerik - it allows you to avoid using UpdatePanels, and limit the amount of info passed back and forth between server and client by declaring direct relationships between calling controls, and controls that should be "Ajaxified" when the calling controls submit postbacks.

Answer 2

I recommend that you walk over to your local book store this weekend, get a cup of coffee and find jQuery in Action by Manning Press. Go ahead and read the first chapter of this 300 page book in the store, then buy it if it resonates with you.

I think you'll be surprized by how easy jQuery lets you perform what your describing here. From ajax calls to the server in the background, to showing and hiding div tags based on the visitor's actions. The amount of code you have to write is super small.

There are a bunch of good JavaScript libraries, this is just one of them that I like, and it really is easy to get started. Start by including a reference to the current jQuery file with a tag and then write a few lines of code to interact with your page.

Answer 3

Step one is to make your "dirty" pieces self contained user controls

Step two is to embed those controls on your consuming page

Step three is to wrap each user control tag in their own Asp:UpdatePanel

Step four is to ensure your control gets the data it needs by having it read from properties which check against the viewstate for pre-existing values. I know this makes your code rely on ugly global variables but it's a fast way to get this done.

Your mileage may vary.