Wednesday, February 01, 2012

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

4 comments:

Roger said...

Hello and thanks for your article.

In case I'm using Jquery UI, if I want to publish the website to a IIS server, should I include in the project the "jquery-ui-1.8.23.custom.min.js", "jquery-1.8.0.min.js", the "css" AND "development-bundle" folders ?

OR, is it the case that, using the .js files in some of my aspx pages makes Visual Studio already publish those files automatically ?

Thanks in advance,

Roger

[eneida] said...

Muchas gracias, realmente lo necesitaba.

Thank's a lot!

Unknown said...

Thanks a lot.

This article helps me a lot.

DotNetGuts said...

Friends this all is way too old stuff, if you are using VS.Net 2012 or 2010 it already have JQuery Installed in it. And you for JQuery UI it is good to installed from Nuget Package. For most of thing it is good to use Nuget package since it is more relaible then hand plumbing...

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape