Date Picker

To replace the Telerik calendar control with the jquery-ui inline date picker, I've had to get familiar with jquery and AJAX. When selecting a date, I wanted to make a post-back to the server so that I could fetch the maintenance tasks to display on the right hand side.

With the Telerik calendar, this was easy, as the control has an action method that allowed me to invoke the controller. The only difficulty I had was with a bug in the control which prevented me from changing the date format to a non localised format. I found this solution: http://www.telerik.com/community/forums/aspnet-mvc/calendar/calendar-date-format.aspx

Anyway, back to the jquery-ui inline datepicker. To do the callback to the controller, I needed to hook up a client side event handler (onSelect) and get it to make an AJAX call. I then had to modify my controller action so that it returned either a full view when called outside AJAX (i.e. for when the whole view is loaded on initial routing) and a partial view for when it's called from AJAX. Another handler receives the partial view and inserts the partial view into the relevant div.

This approach is great for 2 reasons: Firstly, the whole page doesn't get refreshed each time the date is changed, just the contents part of the page that needs changing. This also means that I don't have to send the date back to the view to keep the state on the date picker.

Now I'm reasonably happy with the UI, I'm going to start building out the back end of the application. I want to be able see maintenance tasks from the database. Whilst I was working with the UI, I was happy to use some 'canned' data from in-memory entity objects.

NB: I found quite a good site that explains the basic web concepts with lots of examples. This has been very useful to me when delving into javascript, html dom and jquery:
http://www.w3schools.com/default.asp