A tale of two ASP.NET AJAX approaches

Warning... extreme techy code monkey content. I'm posting here to make a note of what I did.

I was working on a project where I wanted to do some nifty AJAXy stuff tonight. I've actually been messing with it for a few nights now, and today I got frustrated with the way things were going so I almost started over.

The idea was simple: Allow the user to click on a link, which opened up a text box, and after typing a few letters, all kinds of stuff appears relevant to the text she typed. This is conceptually similar to what the auto-complete extender does, but instead I want to bind what it calls to a templated control in a Repeater. Sounds simple enough, right?

Well, I thought it might be. I made an extender that captured the keyup event of the TextBox control that would fire the postback the TextBox control's server-side change event. The repeater itself was in an UpdatePanel. It worked like a champ, or so I thought.

The weirdness began when I tried to click on the rendered results in the repeater. Like magic, they just disappeared. I was able to debug enough to see that when I did that, the client-side change event for the box was fired, which of course with my repeater caused the server-side to fire. Beyond that, the debugging did not go well for me, and my Javascript skills aren't great to begin with. Even poking around with Firebug, I couldn't figure out exactly what was going on. Besides, IE to Firefox behavior was a little different, and it didn't react when I backspaced below the minimum character count.

I still believe that any generic put-stuff-in-an-UpdatePanel kind of functionality is an immediate score and works like a champ. It really does remove the plumbing nonsense from the equation for server-side monkeys like me who don't want to know or care about what's really going on. Getting a little more creative, however, is less easy. The syntax for creating an extender is really, really strange for the client-side pieces. It's not that hard to figure out if you follow the sample, it's just strange to the un-scripted eye.

After screwing around with this and feeling like the complexity of the solution was growing over the complexity of the problem, I decided to step back and write some stuff on a more manual basis. My first thought was to hack out some handlers that generated HTML based on values in a query string, and have the well-known XmlHttpRequest objects handle that call from the client. That's a really easy solution that you can learn from any AJAX tutorial.

But I do believe there is some power in using "the system" as it were, because it makes exposing a Web service easier by creating script proxies under the hood and without any real work. An article on MSDN by Fritz Onion was what originally inspired me, and of course there's adequate documentation as well.

All of a sudden, my life became much easier, and it just worked. I registered the Web service and the client script in the ScriptManager, used a plain vanilla HTML input tag with an onkeyup event handler call, and in ten minutes I got to the place I wanted to be with far less bulk than the extender and UpdatePanel combination.

I guess the bigger point I'm trying to make here is that it's tempting to solve every problem with UpdatePanels, but honestly there is so much power in this framework that it's worth it to get to know the client-side stuff.