Tracy’s Blog

Take your work seriously…but never yourself.

‘Mo AJAX Pleeeeez?!!!

ajax.pngFew (web developers) would argue: The improved quality of user experience when navigating a JavaScript enhanced website or even a single web-page when compared with that of its non-JavaScript utilizing, post-back requiring, entire page re-rendering counterpart(s). I must confess, most of my early years in web development were spent living in paranoid fear of JavaScript. When confronted with it, I found it cryptic and foreign looking – ironic considering my extensive varietal exposure to probably a dozen or more programming languages, half a dozen technical platforms, and plethora of coding design concepts and algorithms. Still, in spite of my broad background, JavaScript freaked me out; the way it intermingled haphazardly with the HTML and executed on the client-side. Fortunately, after years of therapy and slow, gentle, indirect exposure, I’ve grown to admire and respect JavaScript’s indisputable power and user-experience improving potential. So much so, that my new web development motivational acronym is: NPB (No Post-backs); your users will thank you.

Speaking of JavaScript, I’ve continued frolicking with a plethora of the AJAX Toolkit components including the ReorderList and built-in AJAX Extension; the UpdatePanel. At the risk of sounding like a huuuuuge geek, the ReorderList control is AWESOME (once you get it working)! It’s one of the more difficult controls to get working initially, namely because the control’s sample code, at best, faintly resembles the sample displayed on the .NET AJAX website.

Here are some pointers to get you started:

  1. Copy the ReorderList and associated ObjectDataSource from the SampleToolkit Code.
  2. The associated DataSource can be any type you’d like other than an ObjectDataSource, just make sure you provide the Priority parameter for updates, insertions, and selects and a unique field identifying each of the ReorderList’s elements for updates, selects, and deletes. All remaining fields should be those relevant to the content of your ReorderList’s elements.
  3. Set the ReorderList’s DataSourceID attribute to your DataSource’s ID and the DataKeyField attribute to the unique field name.
  4. Write the corresponding queries (or stored procedures) for the select statement (be sure to order by priority here!), update statement (don’t forget to update the Priority parameter value here!), delete, and insert statements.
  5. Last, but most important, MAKE SURE you put a value into the DragHandleTemplate’s div. It doesn’t matter what; just throw something in there because without it, you won’t be able to drag your elements around and you will be baffled as to why it won’t work!!

For testing purposes, any arbitrary value(s) distinguishing each of the ReorderList elements within the ItemTemplate will do, and viola! Your control should be working; complete with database updates when you move the items around. Now for the really cool part – functionally, you can place ANYTHING within the ItemTemplate. For example, the application I’m building required users to be able to visually alter the order of blocks of reviewers for a work flow web application. In order to achieve this, I had to house 3 NESTED GRIDVIEWS within my ItemTemplate, each of which are editable/deletable, etc…and everything totally works!!

After one small change…which brings me to my next topic: UpdatePanels. Initially, these little dealios seem like a post-back avoiding savior. They’re extremely simple to implement allowing developers to essentially just execute server side, event-handler code for a control without a post-back just by including the control within an UpdatePanel. However, one soon realizes that attempting such a feat with even a slightly performance intensive control (such as a DropDownList with 1000+ elements), and the control becomes unusable; the reasons for which you will find: Here, in this person’s enlightening article.

What does this have to with a ReorderList? You’ll notice the sample ReorderList is housed within an UpdatePanel for reasons I’m not entirely certain and its presence was hosing up the performance of the controls contained within my various internal GridViews. The good news is that removing the UpdatePanel doesn’t seem to have any ill effect on the behavior of the ReorderList at all so I would suggest eliminating it altogether unless your ItemTemplate contains a level of simplicity comparable to that of the sample ReorderList’s.

That said; my mind reels (no, I don’t get out much), at the extensive use possibilities of this control. Any web application requiring users’ to declaratively order anything could potentially benefit from this control. Whether it’s a simple shopping list, or ordered favorite home prospects (complete with images and description) within a real estate website, or giant ImageMaps with routing sequences, or ANYTHING!!

At any rate, hats off to the creator of the AJAX ReorderList control for providing such a robust, adaptable, and functional tool that I can now include within my web application arsenal.

Advertisements

February 3, 2008 - Posted by | Tech

3 Comments »

  1. Have you looked at jQuery [http://jquery.com/], Behaviors [http://www.ccs.neu.edu/home/dherman/javascript/behavior/] and the Yahoo! UI toolkit [http://developer.yahoo.com/yui/]?

    IMHO, that is the best scripting suite to build postback-minimized webapps. It beats aspnet ajax for the simple fact that you don’t make binary references to System.Web.Extensions and are not subject to the version conflict that got introduced between VS2005 and VS2008.

    My process for using these within ASPNET is: layout Default.aspx using yui-grids, build Controller.aspx to expose an API into the business logic (yes, I create faux-MVC webapps) and then plug in the UI controls and Ajax calls with jQuery or yui. Now, you can write functional unit tests against the API exposed by Controller.aspx and pay someone to create the UI scripts to test Default.aspx. Joy!

    Comment by rohand | February 3, 2008 | Reply

  2. I haven’t yet; looks interesting, I’ll definitely check it out!

    Comment by Tracy | February 3, 2008 | Reply

  3. Both the first commenter and you would probably be interested in the new .Net MVC Framework (asp.net/mvc). It makes creating a post-back minimizing site much easier, even if you want to use the yui toolkit. I like using Jquery’s $.ajax functionality and the built in ability for your controller actions to return JSON data over the .Net ajax control toolkit stuff.

    Encosia.com also has some good posts about some templating solutions to use instead of the .Net stuff.

    Comment by Jacob4u2 | November 12, 2008 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: