Vijay's Blog on .Net

• Tweet

• Tweet

jQuery UI has a lot of widgets: Accordion, Auto-complete, Datepicker, Dialog, Slider, Tabs. It is not very obvious how to integrate these widgets into your apps. jQuery site has a Getting Started guide. But, this guide covers the download part, alone. This blog post will help you get started in integrating jQuery into your Asp.Net applications.

jQuery UI comes with a lot of themes. The Gallery contains a lot of themes that you can browse. Once you decide on a theme, click the download link. In the download page, select your preferred theme in the right hand dropdownlist.

In the selections, select all of UI core. Select all of Interactions. This is because some of the widgets might use a few Interactions internally. In the Widget section, select few widgets. In my project, I require Datepicker, and Dialog. So, I am selecting only these two widgets. Deselect all of effects. Effects are required for animations. For most professional applications, this may not be required. Once the selection is complete, click Download button.

The Download button downloads a zip of the selected source. Extract the zip into a folder of your choice. Of all the extracted files, we need two script files and a CSS folder. Copy the jQuery (jquery-1.5.1.min.js) and jQuery UI (jquery-ui-1.8.14.custom.min.js) script file from the js folder into the Scripts folder of the application. Copy the theme folder from the css folder into Styles folder of the application.

Open the application in Visual Studio. Add the script files and the theme folder into your project (using Add Existing Item). In the header section of your content page, add references to the script files and stylesheet file. The code can be found below:

<link href="Styles/jquery-ui-1.8.14.custom.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.14.custom.min.js"></script>

Finally, write the script to use the jQuery widget. This is very simple. If you have a textbox (txtDate) for which you want to attach a datepicker, all that you have to write is the following code:

$(document).ready(
  function() {
    // the below selector gets the textbox with name ending with txtDate
    // this selector ensures that the textbox will be picked even if it is embedded
    // within a naming container like a GridView
    $('input[name$=txtDate]').datepicker();
  });