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.


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.

How to: Use cascading drop-down lists in PowerApps

Hi all, Using cascading dropdown, users can easily fill the forms by selecting drop-down values dependent on values from another dro...