Playing with JQuery and ASP.NET MVC
||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/|
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:
- An ajax 'picker' - displays the results via Ajax, stores the options in a cookie. Subsequent visits can re-create the UI server-side.
- 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.
- Minimal / incredibly readable client side-code.
- All the whizzy Ajax loading animation people expect.
- Maintain Ajax context, so options appear on the page in the order they were clicked, regardless of the order of processing on the server.
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.