Using jQuery-UI with ASP.NET MVC

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:

     <meta charset="utf-8" />
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
     <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css"/>
     <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/jquery-ui-1.8.17.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
... remainder omitted

My Index.cshtml file in my \Views\Search folder looked like this:

@model CCM2.CASS.App.Models.SearchModel

@{ViewBag.Title = "Search"; }

<script type="text/javascript">
     $(document).ready(function() {
         $("#tabs").tabs();     });

<h2>Enter Search Criteria</h2>

<div id="tabs">
         <li><a href="#tab1">Appearance Date</a></li>
         <li><a href="#tab2">Docket</a></li>
         <li><a href="#tab3">Police File</a></li>
     <div id="tab1">
     <div id="tab2">
         @{Html.RenderPartial("_PartialView2", Model.PartialView2Criteria);}
     <div id="tab3">
         @{Html.RenderPartial("_PartialView3", Model.PartialView3Criteria);}

<div id="searchResults">
... results area omitted

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.


I am a 50 something technology geek who has been working in the IT industry for over 25 years.

Tagged with: ,
Posted in ASP.NET MVC, jQuery

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: