Developer

Microsoft embraces open source with jQuery

Microsoft plans to integrate the JQuery library into both the ASP.NET Web Forms and ASP.NET Model View Controller frameworks. Tony Patton outlines how jQuery may work within an ASP.NET application.

Microsoft recently announced plans to adopt jQuery as part of its official development platform. The inclusion of jQuery provides more features to ASP.NET developers. Here's a closer look at the combination and how jQuery may work within an ASP.NET application.

JavaScript development via jQuery

The jQuery JavaScript library is an open source JavaScript library that simplifies many aspects of JavaScript development. It provides a powerful framework in a small package and enjoys a loyal following among AJAX developers. Among its many features is the ease at which it allows you to work with anything within a Web page including the DOM, event handling, animation, and all aspects of AJAX.

In contrast to other JavaScript libraries, jQuery has a very small footprint (15 KB). In addition, it is cross-browser compatible and has a large following with extensive usage on major Web sites -- NBC and Netflix are two great examples.

JQuery's features are beyond the scope of this article. For more information, check out the jQuery Web site; the site sets it apart from other frameworks, as it provides excellent documentation and example code.

ASP.NET and jQuery

Microsoft plans to integrate the JQuery library into both the ASP.NET Web Forms and ASP.NET Model View Controller (MVC) frameworks. The delivery model is the Microsoft AJAX Framework, which is a combination of ASP.NET AJAX and jQuery. The best features of both will be utilized to provide a framework for building powerful AJAX applications.

ASP.NET AJAX provides excellent features for working with AJAX requests, while providing plenty of components and controls (along with the AJAX Control Toolkit) for building AJAX enabled interfaces.

On the jQuery side, the features of selectors, animations, and plugins are utilized. Selectors allow you to easily grab elements from a DOM and manipulate them. The animation features of jQuery are excellent and easy to use. The plugin architecture is very powerful and has a loyal following, with many freely available plugins that expand the jQuery library.

With the adoption of jQuery, it will be fully integrated into future versions of Microsoft's flagship development environment Visual Studio. The integration will include IntelliSense support, making it much easier to utilize the jQuery library. jQuery will make its first appearance in ASP.NET MVC.

It is important to note that Microsoft has no plans to take over or build its own version of jQuery. The company will utilize the jQuery library as-is under its MIT license. However, Microsoft does plan on actively contributing to jQuery, so who knows how future jQuery development may be influenced.

In action

As I write this article, the inclusion of jQuery within ASP.NET is not available in any form, but you can easily download the library from the jQuery site and put it to use. Once downloaded, the jQuery source file is installed on the Web server and may be referenced with the following line:

<script src="jquery.js" mce_src="jquery.js" type="text/javascript"></script>

When working with ASP.NET with AJAX support, you can use the ScriptManager control to bring the jQuery library into the page, as the following snippet illustrates:

<asp:ScriptManager id="sm" runat="Server"><Scripts>

<asp:ScriptReference Path="jquery.js" />

</Scripts>

</asp:ScriptManager>

Once included or referenced, it is available for use within that Web Form.

The following example was given during a recent presentation. The code sets the background color (via CSS) for all textboxes on the page. It uses a jQuery selector to grab all textboxes with the CSS property used to manipulate the background color.

<script type="text/javascript">function pageLoad()

{

$(":text").css("background-color", "red");

}

</script>

More to come

While this article covers Microsoft's announcement regarding jQuery, the actual delivery of the technology remains to be seen with future versions of Microsoft products. On the Visual Web Developer Team Blog, Jeff King promises an updated IntelliSense file for Visual Studio 2008.

You can get up and running with jQuery in Visual Studio 2008 via the Visual Studio jQuery download. Channel 9 has a great tutorial about jQuery and ASP.NET. But the best way to get acquainted with jQuery is to dive into it using your ASP.NET applications.

An interesting combination

I know many developers who have been using jQuery within their ASP.NET applications for a long time. They are excited to have jQuery fully supported within the ASP.NET platform.

I find it interesting that Microsoft chose to go with jQuery as opposed to building its own solution. The power of open source software is validated by an industry behemoth. Of course, Microsoft will still push its CodePlex site for its own version of open source when and where they can, but it makes me wonder what other open source tools and libraries Microsoft may adopt in the future.

Do you currently utilize jQuery or another JavaScript library? Do you use them in ASP.NET applications? Share your experience with the Web Developer community by posting to the discussion.

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

11 comments
tanleusa
tanleusa

Tony, I use it with Domino and they are a perfect match.

aaronlewis
aaronlewis

I use it at GuildPortal.com (more in the administrative interface for guild sites than anywhere else). In your sample, you had the scriptmanager load the jquery .js file, which has a really big drawback: you're incurring the payload cost of Microsoft's ASP.Net Ajax client-side stuff, which is gigantic. Most of the really cool stuff to be done with jQuery and webforms can be done without Microsoft's Ajax stuff at all.

Selvamani
Selvamani

hmm great,MS also using the open source,i did some samples using jquery,quite good to see its chain functionality.i think jquery will help the rapid application development in web part of the application and enhance the look and feel of the application. i have doubt,it may be little bit slow,but i am not sure

grtammi
grtammi

I think if you're strong in CSS, jQuery makes a good case to be your library of choice. I personally like using the advanced selectors to pull information; I occasionally think of jQuery as being a training grounds for writing CSS2 and CSS3 compliant sites in the hopefully near future ... well, once MS brings IE up to snuff ... :P

chraigs
chraigs

Ive been using scriptaculous for a while, can't say i've tried jQuery.

byron.bennett
byron.bennett

One of the tricks that I've encountered using jQuery with ASP.NET is getting the client-side ID of runat server DOM elements. With jQuery, you can bypass the ID by assigning a unique Class name and select on that, but I wanted to use ID. From my limited experience with ASP.NET, I've noted that DOM elements that are processed server side get assigned long, tortuous ID's. On the client, the ID certainly doesn't come out to what you assigned it at design time. These need to be predictable to use them with jQuery on the client. I found a work around on the web, blogged about it here. I wonder if Microsoft is going to make specifying the client side DOM ID of runat=server elements easier now that they are including jQuery. I love how easy ASP.NET is to use with datagrids and database applications, but I love how everything is out in the open and predictable with PHP. ASP.NET does a lot of stuff under the covers, and that can be frustrating for people who have the need to know how it works. Cheers! Byron

TechRepublic
TechRepublic

Of course MS is embracing jQuery. It is the first step in the Embrace-Extend-Extinguish strategy.

Justin James
Justin James

I've been hearing a lot of good things about jQuery lately. It's nice to see Microsoft becoming more inclusive of items developed outside their world. It's really frustrating to either wait for them to try to emulate someone else's work, or to use a third party system that is not supported. This is hopefully a sign of things to come! J.Ja

apotheon
apotheon

"[i]It is the first step in the Embrace-Extend-Extinguish strategy.[/i]" They don't always get as far as "extinguish". For instance, Microsoft has been using the BSD Unix network stack for every MS Windows OS version up to XP, and its use of Kerberos in Active Directory hasn't resulted in the death of MIT Kerberos. On the other hand, a case could probably be made for AD standing in the way of greater popularity for MIT Kerberos, especially on MS Windows systems. I'm sure that Microsoft has ideas for how to "extend" jQuery, and how it can push the original jQuery and other non-.NET AJAX frameworks out of their current market share niches. At least Microsoft is starting to use open source software in a more high-profile manner, though. I think it's a sign that things are moving in a good direction.

pointzerotwo
pointzerotwo

Post #3 points out one of the first ways they'll need to extend it.

novicow
novicow

15puzzles game implemented using jQuery.

Editor's Picks