Tuesday, March 2, 2010

How to: Use jQuery user interface with ASP.NET

Hi all,

Oh boy! I am just loving jQuery and its interactions with ASP.NET. In my last post,we found that jQuery is a lightweight javascript library and leverages rich user interface.  It has lot of functions such as hover(), css, cssClass, slideDown, slideUp, animate etc. jQuery provides a separate library for user interface such as accordion, tabs, slider, dialog box, draggable, droppable etc. 

1) Download jQuery (functions such as slideUp, slideDown, animate etc.)
2) Download jQueryUI (functions such as accordion, tabs etc.)

For each downloads I found a very impressive video tutorials how to set up jQuery.  


I will walk through a simple accordion in an ASP.NET page. 

Step1: Download jQuery and jQueryUI as mentioned above. 

Step2: Create a New project in VS2010 RC New Project >> Visual C# , Web >> Choose "ASP.NET Web Application" >> Project Name: ASPjQueryUI >> Click OK


Step3: When you download jQueryUI, copy the  "jquery-ui-1.8c2.custom" onto "ASPjQueryUI". Its easy to copy to "css" and "js" as separate folders. 


Step4: In the body section, we create a div with id named "accordion". Under this div, we create 3 hyperlinks named: Section 1, Section 2 and Section 3. For each of the hyperlinks we create div and put some text. 

Step5: Under head section, we drag the jQuery, jQueryUI and css. We also an create accordion control as follows: 

Step6: Press F5, to view the output. 


What I noticed is that we can manipulate jQuery for advanced scenarios as well. This post is just a basic demonstration.

Cheers, 
--aaroh

Download the source here

1 comment:

Unknown said...

Thanks for a great SharePoint Jquery simple example. Your source works like a charm. However when i deployed your solution as a webpart in my development environment, i notice i was getting a javascript error at the bottom of IE. I looked at the code and removed a reference for css file as javascript in script tags in WebpartjQueryUserControl.ascx file and the error went away. :)

have a good day.

Low Code Reimagined with AI + Copilot Pitch Deck - Copy Copilot day (Virtual) - 2023

 Hi All,  I presneded a session at Pune UG on Low Code Reimagined with AI + Copilot Pitch Deck.  Video is at this address  https://www.youtu...