Monday, March 1, 2010

jQuery and Visual Studio 2010 RC

Hi all, 

I have been experimenting with jQuery and VS 2010. Frankly, I have never tried working with jQuery scripts and looked for some good tutorials. Fortunately, I have an excellent a site which has tutorials  "jQuery for Absolute Beginners Video Series".  It an awesome complication of basic jQuery video series. I strongly recommend to view and experiment with VS2010 if you are don't have any experience with jQuery

I have also have some basic confusions such as:

Question: Is jScript same as jQuery??
Answer: No!
jScript is Microsoft product with an extension of  ".js". Please note that latest version of jScript is
jQuery is lightweight javascript library and developed by John Resig.Its free, open source and under MIT license. 

Question: Can we use plain javascript because we have to learn a new technology i.e. jQuery? 
Answer:  If you have written any kind of javascript, you must have noticed that tough to develop a simple script. Consider developing an accordion which is a complex script and minimum number of lines to develop it will be more than 100

Now, consider jQuery. It can do the same stuff in mere 2 lines.
$(function () {
In jQuery site is clearly written that, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

The first video of beginners shows how to download the jQuery library. As the beginner, we will download the production one.  It has lot of functions such as hover(), css, cssClass, slideDown, slideUp, animate etc.

I also discovered that when I created a new ASP Web Application, the jQuery is embedded automatically. Let's have a  step-by-step walk through: 

Step1: Fire up Visual Studio 2010 RC, New Project >> Visual C#, Web >> ASP.NET Web Application >> Enter project name: ASPjQuerySample

Step2: Note the project structure, there is a folder named: Scripts and its has 3 JavaScript that supports jQuery. It also gives jQuery intellisense (jquery-1.3.2-vsdoc.js)

Step3: Drag all 3 javascripts under head section. Also add "<script type="text/javascript">" to check the jQuery intellisense. Type in $( and visual studio kicks in. 

Step4: I used the first video of "jQuery for absolute beginners" to test my solution. In the body,  --created a "div" with ID named "box". Created a style for the box.
--A href tag with text "Click me!"
--Created a jQuery function. When user clicks the "Click me!", an animation executes where the div slides down.  

jQuery also can be used in SharePoint 2010 as well to make user interface more rich and interactive. In some post will show how can embed jQuery in SharePoint 2010. 


Download the source here

No comments:

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...