Problem
I'm creating an ASP.NET web site and would like to leverage an existing JavaScript library to simplify client-side tasks like event handling, making Ajax requests and enriching the user interface.
Solution
By utilizing the jQuery library with ASP.NET you can achieve these goals with the added benefits of cross-browser support, community-driven features and CDN-delivered libraries to keep your page load times low.
Getting Started with jQuery
jQuery is dubbed the "write less, do more" library that acts as a toolset for developers who wish to simplify the way they work with the DOM. As the jQuery site suggests, the library is "designed to change the way that you write JavaScript" by making the developer's job easier in everything from animation to making Ajax calls.
If web client development is coffee, consider jQuery to be the cream and sugar: it makes development smooth and sweet. Furthermore, jQuery is designed to be extensible from the ground up. In fact, most of the jQuery library itself leverages its own plugin patterns in order to deliver functionality.
For this reason, as you begin to use the jQuery library, you will see that there are a whole host of extensions available to augment your work - the most notable being jQuery UI - and significant support from the web development community at large.
With hundreds of plugins to choose from, you're likely to find that any client-side task you're looking to accomplish will have a kickstart from the jQuery community.
Is it hard to Use?
Absolutely not! jQuery, for the most part, works on the idea that you're going to be finding a group of elements and doing something to them. The
finding part is performed with selectors, and the
doing parts are the action verbs in the jQuery library.
Let's take a look at a very simple example:
$("p").click(function(){$(this).slideUp()});
Here, the
("p") is our selector and the
click is the action. More precisely, we have setup a click handler for all
p elements to call an anonymous function that performs a small bit of animation.
With that one line of code, every paragraph (contained in a
p tag) on the page will perform an animation to slide out of view when clicked.
The tutorials in this series will have you understanding the code above in no time (and, perhaps, doing something more productive!).
How to Get jQuery
The library is available as a free download from the
jQuery web site, but if you are using Visual Studio 2010 you will also find it included in several web project types by default. You may wish to check for updated versions prior to starting a new project.
You will likely be interested in downloading the library in one of two formats:
- Uncompressed ~150KB: human-readible code that takes longer to download but is complete with comments.
- Compressed (Minified) ~25KB: a "compiled" version of the script, without commenting, that removes as much whitespace as possible along with shortening all non-public methods and internal variables to greatly improve download speed. Generally speaking, this is the recommended version for production environments.
If you work in an environment that requires a license when working with third-party libraries it might be handy to know that it is dual-licensed under MIT and GPL2. You get to choose whichever suits your needs and do not need to notify anyone as to which license you choose or if you switch. For more information you can visit the
jQuery.org site for licensing information.
How Your Users Will Get jQuery
As jQuery is written and served as a JavaScript file it is automatically downloaded by the web browser when you add the appropriate script tag. There are no installation requirements for your web site visitors if you choose to implement a solution based on jQuery.
In fact, while it is perfectly okay to store a copy of the library on your server, there are Content Delivery Networks that host the library. Major websites use these CDNs and web browsers will cache the files once you've visited a site that implements such a hosted file. If you use the CDN, your site visitors will likely already have a cached copy of jQuery on their computer.
Both static linking and including the library from a CDN will be covered in future posts.
Understanding the Parts
As mentioned earlier there is significant community support for jQuery and therefore many options for you to consider when you're going to be building a web application using the library. Let's review the three major components of the jQuery ecosystem:
- The jQuery library - This is the core functionality for jQuery, providing support for traversing the DOM, selecting and manipulating DOM elements, implementing Ajax functionality and event handling
- jQuery UI - A set of user interface components that convert standard HTML elements into rich objects with behaviors, events and styling support
- jQuery plugins - Almost entirely third party development built on the jQuery plug-in patterns and core library.
How the Parts Work Together
the jQuery Core
As already mentioned the core library will be required for basic jQuery operations, such as selecting page elements, performing asynchronous operations, enabling animations or responding to events. And it does as billed; jQuery is easy to use.
As you read through these tutorials you will see how these things come to life on your pages.
jQuery UI
Adding consistent behavior and appearance to controls and user interface elements across browsers and browser versions can be tricky, time consuming and expensive. This is where jQuery UI comes in.
With a theme-driven approach to component development and a commitment to CSS, XHTML and accessibility compliance, the UI extensions to jQuery provide developers a head start in completing their user experience.
jQuery UI requires the jQuery core as a dependency.
jQuery Plugins
The community around jQuery is alive, active and growing. Every day new plugins and variations of old ones are added to the mix.
These components are available through the jQuery web site and a host of other sites. Several of these components, once mature, have made their way into jQuery or jQuery UI proper. The plugins vary wildly in their observance of best practices, styling support and version compatibility but are subject to a rating system on the jQuery web site. This community-driven feedback loop helps make it easier for you to choose which ones to use.
Depending on the plugin you choose to use you may have dependencies on jQuery alone or additionally jQuery UI. Some plugins even have dependencies on other plugins, but setting these up are as easy as downloading a file and including it on your page.
Conclusion
By simply linking to this powerful and evolving code base you can simplify your development efforts on web projects. Likewise, you can iteratively add bits of functionality to existing projects without having to start from scratch.
About the Author
James Chambers is a Senior Software Developer in Canada, where he dodges beavers and tries to maintain his igloo. His development passions are fueled by new tech, new tools and mentoring others. Follow his coding adventures at
Mister James.