Playing with MS Ajax 1.0 and Yahoo UI/Ext

I haven't played with Ajax since Atlas (due to GAC requirement not supported by my hosting at the time) and just so it happened that my hosting company announced earlier that all server installed MS Ajax 1.0 now, I decided to give it a spin.

First confusion. Download Asp.NET Ajax Extension 1.0 or ASP.NET AJAX Futures January CTP?  After playing around with both, I realized the "Futures January CTP" is the add-on features like "Drag/Drop, Animations, UI components such as label/textbox/etc and webparts". So if you don't care about doing client side advanced functionalities. "Asp.net Ajax extension 1.0" is the only download you need. 

I actually like this decision by the MS Ajax team because the add-on package really needs more work and back in Atlas, with everything included, I got confused really quickly. I sure hope they will include a complete suite of UI components later like "repeater", "grdivew", "panel" and what not. Some of you might ask why create a client side Gridview when you can simply wrap "updatepanel" around a current "gridview" component?

Well, it's about your need. Imagine I have this requirement. I have a "Search" Textbox on top and a list of search result on the bottom. As user type in the textbox, I need Ajax magic to fetch the backend listing and display on the page. The proprt usage is for us to detect keystroke on the client side (which you can use the MS Ajax Library addhandler() function to capture 'keyup' or 'keydown' event) and then attach the fetching function as the Ajax callback.

In the Ajax call back function, once I retrieved my results (it could be a strong collection of objects in JSON format which is supported by MS Ajax 1.0), I need an easy way to inject the result onto the page. Wouldn’t it be perfect if we have a repeater or gridview component on the client side and be able to do something like

function fetchReslut(result, eventArgs)
{
     Sys.UI.GridView  g  = new  Sys.UI.GridView();
     g.datasource = result;
     g.databind();
    
     //other features can be UI customization like
     g.headers = {'ID','Name','Email','Phone'};
     g.cssclass = 'gridcss';
     etc etc
}

As you can see, this requirement can not be satisfied via the server side updatepanel as the updatepanel's trigger does not support events like keyup/keydown. There are other scenarios where this type of requirements might happen, so I do wish Microsoft Ajax Team will implement these components.

A good example of this is the "DataTable" developed via Yahoo UI

http://developer.yahoo.com/yui/examples/datatable/paginated.html

another example can be found under Yahoo UI extension via Jack Slocums Yahoo UI extension library.

http://www.yui-ext.com/deploy/yui-ext/examples/grid/xml-grid.html

Both provide the exact type of UI component that I just talked about and of course, I want our MS Ajax DataTable to be similar in syntax to our ASP.NET serverside component such that we .NET developers have an easier learning curve, I just want to throw it out there that's all.

Other client-side components like TabPanel, Tab, Spliter, Container (draggable and resizeable), a more usable calendar that supports (hour, day, week, year views) are all the things I wish future Ajax library could provide.

For now, I just want to integrate ASP.NET with Yahoo UI/Ext. Use the simplicity of MS-Ajax Server Side methods ([webmethod], .asmx, auto JSON serialization) and bind it to the Yahoo UI components?

Can this be done without script conflicts? We shall see and I'll test it out a few integrations in the next few weeks.