Tin Isles

The article you are reading has moved! It is now available at: http://blog.tinisles.com/2008/10/playing-with-jquery-and-asp-net-mvc/

UPDATE: Thanks for the comment Chris. I guess after years of wrestling with Javascript I didn't think of reading in the UI elements to set the cookie. If the cookie was storing something like timezones, I could stick the timezone key into an expando property of the div - nice!

I've updated the source code zip, and the demo.

jQuery and ASP.NET MVC have both caught my eye as interesting web technologies. ASP.NET MVC is a Model-View-Controller approach to web development in .net. I've heard it described as Microsoft thinking up another way they could've upgraded from ASP Classic to ASP.NET. jQuery is a very handy javascript library which abstracts a lot of standard client-side functionality into a cross-browser library, e.g DHTML and Ajax. Microsoft must agree on the usefulness of jQuery - as Microsoft have plans to include jQuery in their own products: jQuery and Microsoft.

To get my hands dirty with ASP.NET MVC and jQuery I'm using it to rebuild a languishing project of mine: www.time2call.net. I've developed a little spike to test a timezone picker scenario. There's a few design goals I had in mind:

1. An ajax 'picker' - displays the results via Ajax, stores the options in a cookie. Subsequent visits can re-create the UI server-side.
2. The same server-side code to build UI HTML for Ajax AND 'from cookie' page load. I.e no duplication of HTML build code client-side and server-side.
3. Minimal / incredibly readable client side-code.
4. All the whizzy Ajax loading animation people expect.
5. Maintain Ajax context, so options appear on the page in the order they were clicked, regardless of the order of processing on the server.

See the spike: here - grab the code: MvcJQueryMuckingCode.zip. The code is built against ASP.NET MVC Preview 5.

Some notes / questions:

• jQuery Callback Contexts - maintaining context between Ajax request / response.
• Partial Rendering & View Engines in ASP.NET MVC - rendering the ViewUserControl for the Ajax request.
• Passing ViewData from Controllers to Views - I don't get the "ViewData.Products" style accessor in my example - I'm accessing the collection through "ViewData.Model". Is this something that's changed in release 5?
• To remove a color option I pick up the position of delete link:

  var index = $('.delLink').index(this);

  Then use this to get the DIV in the same position:

  $('#fldColors > div').eq(index)...

  Is there a better way of doing this?
• When I delete an option I'm expecting the color DIVs to be in the same position as the options in the cookie. That's why I remove the DIV in the fadeout callback. So there's 500ms there where that could go wrong :(. I experimented with selecting just the 'visible' DIVs. But the the div's display style remains 'block' until it disappears.

Labels: asp.net, mvc