Problem
I've already seen the gains that jQuery has to offer with DOM traversal, element selection and placement, updates and Ajax on the client. I want to start building rich interfaces but I don't want to reinvent the wheel for every UI element.
Solution
Many of the common components you'd look for when designing a user interface already exist in jQuery UI, an extension of the jQuery library. It's a free download, and it's simple to integrate into your ASP.NET MVC projects.
Downloading and Installing jQuery UI
The download page gives you the option to quickly pull down the latest stable version of the library or select the components that you want to include. While you are learning the library it's advisable to pull the entire package down so that you don't run into a missing component in your experimentation.
Download the jQuery UI libraryFor a production environment you may wish to optimize the download for your users by selecting only the components you have put into use on your site. The jQuery UI download site helps ensure that you have the required dependancies covered off. For example, when you select the Resizable component, Core, Widget and Mouse are automatically selected for you (if they weren't already checked).
For now, let's stick with either the stable download (located at the end of the first paragraph) or select one of the boxed themes. Click the Download button to grab your copy of the library. The jQuery UI site builds a customized ZIP file for you with the components you've selected, in our case, all of them.
Unzip the directory and open the index.html page in a browser. You'll see a local copy of all the components in action.
jQuery UI and the ASP.NET MVC Framework
It doesn't take long to get up-and-running, but we'll want to set up a test project so that we can see the libary in action. Start by creating a ASP.NET MVC 2 Web Application.
Locate the Content and Scripts folders as we'll need those right away. Navigate through the Views folder to the Shared -> Site.Master file and double-click the file to open it up. We need to make our master page aware of jQuery and jQuery UI, so let's get the required files into our project. We need to perform the following steps:
- Add the required CSS files and images to our content directory, and,
- Add the jQuery UI JavaScript library to our scripts directory.
If you look at the folder that you created when you unzipped the download, you'll find a CSS directory which contains yet another directory inside of this. This directory will be named the same as the theme that was selected when you downloaded the library. If you elected to download the stable build the default theme is "smoothness" and this is the directory you will see. Right-click on the directory and select copy. Now, return to Visual Studio and paste your theme into the Content folder in Solution explorer.
Getting the script in the project is very similar, but instead of copying a directory we just need to copy a couple of files. Return to your downloaded folder and go to the js directory. Copy both jQuery and jQuery UI, return to Visual Studio and paste them into the Scripts folder.
You should see something similar to the following:
Almost there. Head back to your Site.Master page where we'll add the references needed to our site. Modify the head section of the page to include the libary and style sheet.
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
</head>
Note that you can drag-and-drop the files from the Solution Explorer to have Visual Studio automatically generate the appropriate tags.
Save and close Site.Master, then open the index.aspx page in Views->Home. Clear out and then set the MainContent Content control to the following code:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>jQuery UI Hello World</h2>
<button id="show-dialog">Click to see jQuery UI in Action</button>
<div id="dialog" title="jQuery UI in ASP.NET MVC" >
<p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>
</div>
<script language="javascript" type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () {$(this).dialog("close");}
}
});
$("#show-dialog").button().click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
</asp:Content>
Run the application and click the button to see the following:
Congratulations! You've got jQuery UI installed and running in ASP.NET MVC! In the rest of this series we'll learn how to take advantage of these components, coupled with the jQuery library, and use ASP.NET MVC to really drive some killer web pages.
Customizing the Look of jQuery UI
It would be a shame if a rich control library such as this came at the expense of creativity. I'm pretty sure the adoption rate of jQuery UI would be much lower if it did not provide a customizable look-and-feel. Another limitation would stem from a poor or poorly supported skinning process; fortunately, this is not the case with jQuery UI.
ThemeRoller is baked right into the jQuery UI site and provides a live-updated view of your customizations. You can access it by clicking on the Themes link at the top of any page on the jQuery UI site. The visual elements of the template used to drive jQuery UI are broken down into easily-adjustable sections. Spend a little time tweaking these sections to better understand how they affect the template.
Each twirl-down panel contains settings relevant to the visual elements. Most panels are set up to adjust the color of the background, border, text and icon. You can also select a texture to be applied to the and set it's opacity.
While ThemeRoller allows anyone to design a theme, it unfortunately does not make everyone a designer. A sample is below.
We're not entirely on our own (thankfully!) as we can use any pre-existing theme as a template. The Gallery tab in ThemeRoller reveals a long list of templates that were designed by folks much less color blind and possesing much higher levels of design ability than myself.
You can download the theme in it's current form or load it up in Theme Roller by clicking on the edit button. Once you have created the look you're after, click on the
Download theme button near the top of the ThemeRoller panel. You will be taken to the same download page mentioned above and the selected theme will be "custom-theme". You can proceed to download your customized library and start using this great extension to the jQuery library!
Wrapping Up
The jQuery UI library is an excellent set of components that provide a head start on client-side controls and behaviors with a skinnable look-and-feel. Like the library it is based on, jQuery UI serves also as a base for other libraries and plugins for you to leverage. Learning to work with these pre-built elements in your ASP.NET MVC projects will give you the tools you need to develop rich, functional web sites.
About the Author
James Chambers is a Senior Software Developer in Canada, where he demonstrates eco-friendliness by driving his team of sled-dogs to work. His development passions are fueled by new tech, new tools and mentoring others. Follow his coding adventures at
Mister James.