How to add JQuery UI to Asp.net Website

JQuery UI contains sets of controls and themes which you can simply add and start using it, just the way you can use any other third party jquery control.  Incase if you have used Asp.net Ajax Control toolkit in past, then Jquery UI controls are very similar to that.  Let me cut this discussion here and directly show how you can start using JQuery UI in asp.net website, later you can decide how helpful this is for your asp.net projects.

Step 1: Download JQuery UI
Click this link to Download JQuery UI

On Themes Page, click on Gallery tab and select the theme best suitable for your project, you can even customize its color and setting by clicking on edit button, ones you are done, click on download button.

On Download Page, on very right side you will find "Download" button. Its little confusing if you are visiting this page for first time.  Atleast i found it confusing, because i don't read all details :)   

Extract the .zip file, it comes up with 3 folders and 1 index.html file

1. css folder
2. development-bundle folder and
3. js folder

The only folder we are interested in is css folder.  Copy "css" folder and put in your VS.Net Solution directory.  (Incase you haven't created a VS.Net Web Project Please create it now)

Ones you have copied "css" folder inside VS.Net solution directory, click on "Show All Files" from solution explorer.

This make "css" directory to appeared in VS.Net Solution, now right click "css" directory and select "Include in Project" option.

You are done adding necessary files to start "JQueryUI".

Step 2: Open Master Page of your project and add following lines just before </Head>
<%--For JQuery--%>
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<%--For JQuery UI--%>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

Step 3: Add CSS File reference in your project.  You can do so by simply drag and drop .css file from css folder.
<link href="Styles/css/blitzer/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />

That's it you are ready to use JQueryUI.

Incase you want to test whether JQueryUI is working or not simply create one asp.net page and add following lines of code in your content page.
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script>
    $(function () {
        $("#dialog").dialog();
    });
</script>

And this will display JQueryUI dialog box on page load.

We will learn how this code works and more in my next coming blog post

• JQuery Tutorial for Beginners
• JQuery UI Tutorial for asp.net developers