Database Search Solution
(New Version) Search Control
Free ASP.NET Controls
ASP.NET Media Player Control
Flash Video Player Control
ASP.NET Telecommute Jobs
Free IP Location Lookup
Test .Net Regular Expressions
CSS/Table/DIV Page Layouts
Article Sites Master List
.NET Windows Forms
General .NET Framework
Accepting Credit Cards
A Gentle Intro To jQuery in ASP.NET
As an ASP.NET developer, you probably often hear about "jQuery" term. Although jQuery is not strictly part of ASP.NET, it is very popular among ASP.NET developers and used in many ASP.NET web sites.
What is jQuery
Why use jQuery
First advantage of jQuery is that it simplifies common tasks. If some feature is already created, working well and is tested on many websites, then there is no reason to create it again from scratch.
Problems commonly solved by using jQuery
jQuery is often used:
jQuery architecture is extensible. There are many plug-ins ready for use in different scenarios. For example, if you need to create some element of user interface, there is a good chance that someone else also needed the same thing before. You just need to search plug-in directory and check if there is a widget which does exactly what you need.
Will jQuery slow down my web pages
To use jQuery, you need to add a reference to its core .js file. Currently, last version is 1.5.2., and jquery-1.5.2.min.js file, minified and gzipped has 29KB. That is definitely negligible.
In addition to this, if you use jQuery UI or plug-ins, you need to reference plug-in .js files too. If you overdo in creating of some extremely "rich" user interface with too many widgets, effects and other features, then it's possible that page could download slowly because of dozens of external .js files.
Most known alternatives to jQuery are YUI (Yahoo User Interface) library, Prototype, script.aculo.us, MooTools, Qooxdoo, MochiKit, Midori, Dojo, Ext JS etc.
How to obtain jQuery
If you have Visual Studio 2010 installed (including Web Developer Express version), it already includes jQuery in web project templates. You can go File -> New Project -> ASP.NET Web Application or ASP.NET MVC web Application, or File -> New Web Site -> ASP.NET Web Site. In each case newly created project contains folder named /scripts where jQuery files are located.
Image 1: jQuery .js files inside of Visual Studio Solution Explorer
To create new web application or web site without jQuery, choose ASP.NET Empty Web Application or ASP.NET Empty Web Site.
Of course, you can also add these .js files manually. Newest version and all previous versions of jQuery library could be downloaded from http://docs.jquery.com/Downloading_jQuery#Download_jQuery.
How to include jQuery library in ASP.NET page
After you created new ASP.NET project with included jQuery 1.4.1. version, or placed newest jQuery version manually, you can use jQuery in ASP.NET page.
So, in this example, we look into Scripts folder where jquery-1.4.1.js file should be located. This is suggested location by Visual Studio project template. jQuery .js file could be located on other location if you want, even on other web server.
Very often, developers point to Google or Microsoft's server instead of local folder. The benefit of external reference is decreasing of bandwith costs. Also, since jQuery is extremely popular, there is significant chance that your visitor already has jQuery .js file cached on local computer. In this case, there is no need to download same .js again. On this way, using Google or Microsoft's servers speed up your page load and increases user's experience.
To load jQuery library from Google's server, you can use this syntax:
Also, you can use link from Microsoft Content Delivery Network (CDN):
Hello World in jQuery
When developer learns new technology, first example is traditionally "Hello World" application. So, let see how we could create Hello World in jQuery.
Open Visual Studio and create new ASP.NET Web Application, or new ASP.NET Web Site. Open Default.aspx page and go to Source view. Paste following markup code:
If you start application and click on button, Hello World! message will appear inside of div tag.
General rule of jQuery syntax is:
$(SelectSomeObject).ChooseSomejQueryMethod(Place Some Parameters between brackets);
So, in last example we had a line:
With $ character, we accessed jQuery. Then, by using "#btnSayHello" as a parameter, we selected an HTML element which has ID = "btnSayHello". On this way we select object which will be used later in syntax. Finally, after dot we used jQuery html method and placed welcome message in selected object, as one parameter. I think it is pretty simple syntax, isn't it? :)
In addition to this, some jQuery objects could contain one or more sub-objects divided by dots, but syntax stays the same. There could be many sub-objects, but all are separated by a dot, which is familiar syntax to developers in other programming languages like C# orVB.NET.
To easier developer's life, Visual Studio provides jQuery intellisense so you don't need to remember all that objects and methods. When you type $ character inside of <script> tag, you can see a list of jQuery objects with their descriptions:
Image 2: jQuery intellisense in Visual Studio
jQuery core library can be extended, to provide abstraction over core functionality. jQuery UI library contains over 30 components, like Datepicker, Tabs, Slider, different effects, elements for interaction with user etc.
In addition to this, you can create your own jQuery plugin to get feature you want. jQuery community is very active and there are thousands of plugins published on http://plugins.jquery.com , which are sorted in several categories, like Ajax, Animation and Effects, Browser Tweaks, DOM, Data etc. It is good idea to look into this directory first, and possibly avoid creating of something from scratch.
jQuery With ASP.NET - Remarks
jQuery syntax is simple in general. jQuery motto "write less, do more" sounds very appealing. However, notice that "write less" doesn't mean "write fast". Although you can do a lot with single line of jQuery code, it is not always easy to write the line directly from head. jQuery objects, especially if you work with plug-ins, could have numerous parameters and for many people is difficult to remember them. So, while you work in jQuery, you will probably often have to look into documentation to see which parameters certain object requires.
There are security issues related to using of jQuery with ASP.NET. Since jQuery executes on client side it can be easily manipulated by malicious user. Any information that comes from jQuery to ASP.NET server side code, through AJAX or on any other way, should be treated as potentially dangerous user's input.
I hope that jQuery looks a little friendlier to you after reading of this article :). More about jQuery you can find on its official website, www.jquery.com.
comments powered by Disqus