Simple Circles–Enabling jQuery UI (Part 6)

This post is part of a series on building a simple to use web-based contact and customer relationship management application. The goal is to support various audiences including businesses, teams, clubs, religious organizations, etc.
I think of the default blue MVC 3 UI as something of a developer’s test version – not really what you’ll go to production with but sufficient to work with while developing. It’s possible to use the ASP.NET MVC themes from their gallery but I think jQuery and its companion jQuery UI provide a much richer and cross-browser solution with far less effort.

Themes

Steve Hobbs wrote a great step-by-step post on enabling jQuery UI last June. Like him, I used the Redmond theme to start with so it more closely resembled the default.
After downloading the Redmond theme, copy the css\redmond folder to the Content\themes folder under the Circles website. Remember to choose “Include in Project” from the Solution Explorer (see image to the left). As Steve Hobbs indicates, jQuery UI support is already included in the ASP.NET MVC 3 templates – it just needs to be enabled by adding two lines to the _Layout.cshtml in the Shared folder as shown on the right. To start taking advantage of the jQuery UI theme, simply add the appropriate styles to HTML elements. Here I’ve commented out the standard Submit button on the Create.cshtml page and replaced it with one decorated with jQuery UI CSS classes:

<!--<input type="submit" value="Create" />-->
<input type="submit" value="Create" 
       class="ui-button ui-widget ui-state-default ui-corner-all" 
       role="button" aria-disabled="false">

This screen shot shows the before and after using the Redmond theme just set up. These CSS classes are designed such that switching themes is as easy as deploying a different theme to the Content\themes folder and changing the single <link> line in the _Layout.cshtml page. The “eye candy” is nice – it looks fresher and more modern…well, months ahead of the default hard images the browser displays!

Next I’m going to add some feedback for the user when an action completes. The default behavior when adding, updating or deleting an entity is to perform the action then return the user to the Index page. Breaking this down, it means the controller performs the action then uses RedirectToAction to redirect the browser to the default HTTP GET action. Doing so ensures that the user can’t accidently use refresh to repeat the same action, e.g. adding the same entity twice or, classically, buying the same thing again.

Because redirect is used the current HTTP request ends and another one initiates. This means the feedback message has to be passed across HTTP requests so the usual suspect – ViewData – won’t work. The MVC engineers planned for this with another dictionary object that’s briefly stored in the user’s session – TempData. The MSDN article Passing Data in an ASP.NET MVC Application provides the necessary details. Here I tuck the confirmation message into TempData (line #4) before issuing the redirect:

  ...
  this.repository.Add(entity);

  TempData["message"] = string.Format("{0} was added", entity.PartyName);

  return RedirectToAction("Index");
}

Back in the Index.cshtml the message just passed to it is retrieved and rendered with jQuery UI classes decorating the output:

<h2>People</h2>

@if (TempData["message"] != null) {
  <div style="margin-top: 20px; padding: 0 .7em;" class="ui-state-highlight ui-corner-all"> 
    <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
      @TempData["message"]
    </p>
  </div>
}

The result is shown to the right. Another simple feature to take advantage of jQuery’s client-side power is to enable “unobtrusive client-side validation”. There’s plenty of examples already, including the ASP.NET Teams’s own tutorial. Two web.config settings and two more <link> elements to include necessary JavaScript files in _Layout.cshtml and field/form validation moves from server-side down to client-side to provide feedback without having to HTTP POST the form to the server then getting the validation messages sent back to the client browser.

Menu Tabs and Lists

Once again I’m turning to the ASP.NET team’s tutorials to improve the user experience even more. Their Iteration #2 – Make the application look nice article contains two enhancements; one improves the menu tabs by rounding the corners and providing highlighting to indicate the selected tab the user is on and the other replaces the textual hyperlinks on each row with graphics for edit and delete. Again, rather than duplicating details here, please refer to the article for more information. The result of these efforts is shown on the right.

The source code for this article can be downloaded from here. The next several installments will flesh out concrete implementations of the repository using Entity Framework and NHibernate.