Important lesson learned after mucking around trying to get jQuery-UI components working with my ASP.NET MVC 3 project. I was trying to build a tabbed search view. Essentially I had three kinds of searches available and wanted to use the jQuery-UI tab to hide all but the selected search.
I created a model for my searches and proceeded to create views. A main view for my search which would show the criteria at the top (in a tab control) and a results display at the bottom of the page. After reading the information at the jQuery-UI web site on the tab and looking at the example, I determined that it was as easy as it said. So, I created the required items:
- A DIV container for the tab set.
- An unnumbered list for the tab links.
- DIV elements to contain the individual elements.
- I created partial views for each of my sets of search criteria.
I even added the reference to the jQuery-UI script file. When I ran my project, the tab did not render. Hmmm. I wonder why. After a little research, I found I needed a reference to the style sheet that comes with jQuery-UI. I added the link.
Still no joy. What else could be wrong? A lot of trial and error and then I noticed that ASP.NET MVC scaffolds added a reference to jQuery to the top of my partial views. Since my layout for the site already had the reference to the scripts I needed, I decided to try removing the reference to jQuery at the top of my partial views.
Viola! Now it worked. Not sure why but the repitition of the reference was clobbering the jQuery-UI functionality. Now my tabs worked. It was exactly what I wanted. The snippets below show the essential elements.
In the _Layout.cshtml file you need the references to look somthing like this:
My Index.cshtml file in my \Views\Search folder looked like this:
It is usually the subtle things that get you and in this case it definitely was subtle. Unfortunately, they don’t put up signs that say “Don’t do something dumb!” in big red letters. Sometimes you have to search to find it out yourself.