Skip to content

jQuery-ui 1.7 and MVC

March 6, 2009

The news of a new jQuery-ui 1.7 release came in through twitter ! The mvc application I am working on at the moment uses various jquery-ui things, like the accordeon and the datepicker, and some of the icons, but it was a bit messy to actually get it to work. Some of the images were named wrong and the paths didn’t quite work.

The Content and Script folder had become a big mess as well. Luckily with 1.7 that has all passed, I removed the previous version and all images, and inserted the 1.7 smoothness theme. Changed the css and jquery ui calls in the master view and it worked out of the box ! No need to hack around anymore, no image renaming etc… Gratz to the jQuery-ui team for delivering such a nice product.

	<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
	<link href="../../Content/Theme_Red/jquery-ui.css" rel="stylesheet" type="text/css" />
	<link href="../../Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />

If you want to make any changes to the ui, for example I added some padding to the ui-state-error and ui-state-highlight classes, make sure to put them in a seperate file and load them after the included jquery-ui.css file. That way if you change themes or if there is an update, your changes will remain.


jQuery UI in action

  1. Clay permalink
    March 13, 2009 8:19 pm

    Cool you are using jQuery UI with MVC. I just got it working with a test MVC project of mine. I have a question. Are you able to use any of the navigation elements found in jQuery UI, such as tabs? I would be interested in your thoughts on how to implement this with going to different views, being that the content is expected to be in coorisponding div’s on the page already loaded, and the views by default are in seperate pages.–Thanks,

  2. March 13, 2009 11:32 pm

    That’s an interesting question. I think I would use partial views for that. I might slap something together soon, to test something like that out.

    That is what I use in my current project to show the menu on the left side for example.

Comments are closed.

%d bloggers like this: