Thursday, January 27, 2011

jQuery UI and MVC

So I have been working on an ASP.Net MVC app in my spare time and have found at times that the UI is a little stale and clicky. What do I mean by clicky, well I mean the user has to do a lot of clicks to do certain tasks. All these clicks require full post back to the server. I like how I broke up the tasks into steps, but wanted a jazzier way to for the UI to work with the user, so low and behold I added some jQuery UI widgets and the whole process seems way smother and even a little quicker.

First let me talk about jQuery UI. It is a bunch of Widgets and UI interactions developed in jQuery. What is super cool is they have a theme editor so I could easily take the color scheme from my site and theme the widgets so they look like they belong on the web pages. The widgets included are Accordion, Auto Complete, Button, Date Picker Dialog, Progress Bar, Slider, and Tabs. The interactions are Dragable, Dropable, Resizeable, Selectable, and Sortable.

So far on my website I am using Tabs and Dialog. Now I want to state that in my Web Forms days I did work with AJAX.Net controls and although not difficult to use, no where near as easy as jQuery UI has been. To intergrate a dialog box on the page all I had to do is create a div tag and wire the jquery code to the tag. The Tabs was a little more work, however it was just create some simple HTML and wire that html to jQuery.

In my next post I will try to show code examples for both of these process. I was going to do it here, but was having trouble with my code syntax highlighter plugin and it was not looking good.

No comments: