A couple of weeks ago Microsoft announced that they will ship jQuery with future versions of Visual Studio.

"We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch.  The files will continue to use and ship under the existing jQuery MIT license." - Scott Guthrie

Let me emphasize that this is as far as I know the first time I've ever heard that Microsoft is going to incorporate an Open Source project into one of their products. Usually they track down the creators of the Open Source projects, hire them and re-invent the project and then incorporate - like they did with NUnit.

By Microsoft making jQuery a part of their official development platform is a huge statement. They show willingness to collaborate with the community and embrace new and upcoming standards. - I like the new open Microsoft. Not only is this a huge statement, but also a recognition to the jQuery project. Thumbs up for Microsoft and the jQuery team!

What does this means for me?

If you are a .NET web developer you probably already heard some buzz about the jQuery framework in the blogosphere, and you might also have taken it for a test run - if not, check it out.

I believe that we will see built-in support for jQuery in future versions of their web frameworks (ASP.NET WebForms and ASP.NET MVC frameworks). I guess they will release a new sets of controls that are developed on top of jQuery. Maybe we will get a jQuery Toolkit, like we did with the Ajax Toolkit?

According to Scott Guthrie, Microsoft has received lots of requests from the developers that they want support for selection and animations. - I think it's here jQuery really shines.

"Rather than duplicate functionality, we thought, wouldn't it be great to just use jQuery as-is, and add it as a standard, supported, library in VS/ASP.NET, and then focus our energy building new features that took advantage of it?  We sent mail the jQuery team to gauge their interest in this, and quickly heard back that they thought that it sounded like an interesting idea too." - Scott Guthrie

We will have an richer experience when developing on the client-side. jQuery is a framework which makes it easy to manipulate the DOM (Document Object Model) and to implement Ajax functionality. Guthrie has already announced that there will be intelliSense support for jQuery in Visual Studio - even richer developer experience.
So if you want to be ready for future versions of the web development frameworks on the .NET platform, you better check out jQuery!

Where to start?

I previously written a couple of posts about jQuery and using it with the ASP.NET framework. Start by checking them out: Hello jQuery! and jQuery for ASP.NET MVC Unleashed.

Rick Strahl has written lots of good stuff on jQuery - check them out.

DotNetRocks has a podcast about jQuery.

And Scott Guthrie has linked to some good jQuery resources.

Happy coding!

I tried jQuery for the first time a couple of weeks ago, and got blown away by the power this library adds to the Java Script language. I finally found a library that can do the heavy lifting for me when developing web application the Web 2.0 way.

The more I played with this library, the more addicted I got. And I could easily imagine this library in use with existing web applications frameworks such as the new and upcoming ASP.NET MVC. And this actually became my first development task with jQuery. A task where I used the Ajax functionality to communicate with the ASP.NET MVC framework on the server side - something several people already have done before me (Fredrik Karlseth). Scott Hanselman also stated that he would like to see some jQuery love from the community.

After a few hours programming jQuery, I decided that I would try to develop some jQuery plugins to speed up the Ajax programming against ASP.NET MVC. And this decision is the main reason for this post.

Also let me emphasize that there is no lack of Ajax support in the ASP.NET MC framework. In the Preview 4 (or was it 3, I’m not sure) release of ASP.NET MVC, they shipped built-in Ajax functionality for forms and ActionLink – which is a good start! But their Java Scripts is not based on jQuery and the functionality is basic. Before I start on the jQuery plugins, let’s have a look at the built-in Ajax support.

Built-in Ajax support in ASP.NET MVC

The built in Ajax support will let you create Ajax Forms and ActionLinks. The Java Script code is located inside two libraries in the Content directory.

They have also added a View helper called Ajax that generates HTML that is wired up to these two Java Script libraries.

For instance the ActionLink will create an A tag and add an event handler to the onClick event. Notice the specification of the UpdateTargetId; this is the ID of the object where the response from the Ajax request will be rendered. This is good for those partial rendering scenarios. It’s also possible to define which Java Script function to call before and after (OnBegin and OnSuccess) the Ajax request. Something that’s useful when you want to display a progress bar while the Ajax request is being processed.

On the server side you also have functionality to detect if the request made from the client (web browser) is an Ajax call.

If you want more details, read Hanselmans post.

ASP.NET MVC Ajax support with jQuery

One of the first things that I did was to mimic the built-in Ajax functionality in ASP.NET MVC. I decided to drop using a View Helper to generate HTML and wiring up the Ajax functionality, and rater use plain old Java Script and jQuery to Ajax enable Forms and Links (ActionLinks). When deciding this I had in mind that the ASP.NET MVC framework is designed for extensibility and one of the extensibility points is the View engine. I wanted the Ajax functionality to be agnostic of this, so the functionality can be used across several View engines. It goes like this:

You might notice that I extended the jQuery library with new functions (ajaxActionLink and ajaxForm). These are so called plugins, which is the extension point of jQuery. It’s also possible to specify which object to update when Ajax response is received from the server, just like the built-in Ajax library.

Also notice that both the ActionLink and the Form sample had the HTML generated by the server (View), and that I only used Java Script and the jQuery plugins to configure and enable the Ajax functionality. The plugins extracts the information they need out from the HTML generated by the server, and use this information to enable the Ajax functionality. Typical information is the href attribute from the link (ActionLink) object, and the action and method attributes and input objects in the Form. The HTML generated by the View is illustrated on the picture below.

Just mimicking existing functionality in an existing framework isn’t that much fun, so I also added some new features as well. One of the cool features in jQuery is that you easily can select objects from the DOM based on an expression (like the SELECT statement in LINQ and SQL). For instance, you can select all the links inside a DIV, and then start to manipulate the functionality of these. Let’s say we have a DIV container with several links, like in the sample below:
 

And we want to Ajax enable both of these links, it goes like this:

Notice the expression inside the jQuery call, which states: find the object where id=actionsLinks and select all links objects within. The ajaxActionLink plugin will recognize that this is a list of link objects, and it will Ajax enable all of them.

But it didn’t stop here. I also added support for an AjaxDropDownList. The idea is the same as with the Form and ActionLink features. You select an existing drop down list object (select) from the DOM and configure it for Ajax. The drop down list must be generated by the server (View), and the only thing you need to do is to configure the URL to request when the user selects an element in the dropdown. When the selection is changed, it will trigger an Ajax call to the server. It goes like this:

Remember that these plugins require the HTML to be generated by the server (Views). For instance, you have to render the whole form (action, inputs etc.) and link (URL) on the server, before Ajax enable them, and when they reach the client (browser) you can configure the Ajax functionality using these jQuery plugins.

All of these plugins also have the same callback functions for onBegin and onSuccess like the built-in Ajax functionality. Jo will see this configuration in the examples below.

There is more!

One of the great inventions in ASP.NET MVC, is the Routing mechanism, which was invented by TheGu himself. Explained with one sentence; this gives you 100% control of the URLs in your web application and enable you to configure how the URL should be mapped to the logic (Controller) in your app. With the standard HTML View helpers you can generate links like this:

Notice that the URL isn’t defined at all, the only thing you input is the name of the Controller and the Action, and then the View Helper extracts information from the Routing mechanism and generate a URL based on the information. Smart? - Very! And it’s very DRY (Don’t Repeat Yourself). You don’t repeat yourself and you don’t hard code the URL into a View. You just point out which controller and what Action to be called.

The jQuery plugins mentioned above requires that the server (Views) generate the HTML, and then they extract out the information when they add Ajax functionality to the HTML output. What if we could skip this part, and let the jQuery plugins do all of the Ajax and lifting for us? Like the View helpers does on the server side. Wouldn’t that be nice? Of course it would and it goes like this:

Notice that I now specify the name of the Controller and Action client side. –Hold on, the client side doesn’t know about theGus routing mechanism, so how can they generate a valid URL for me?

It’s not black magic; I’ve implemented a Controller for the jQuery plugins that lives on the server side. This Controller gives the jQuery plugins information about the other Controllers, their actions and routes, and other metadata. Based on this data the jQuery plugins can generate a valid URL based on the routes configured for the application.

Also notice that in the scaffolding example above, I’ve only generated an empty tag with an id attribute on the server, and the jQuery plugin will generate rest of the information.

The scaffoldDropDownList plugin will ask the server for data and use it to populate the dropdown with content. This is done by specifying which action on the server to be called, by setting the name of the action in the listAction parameter. The plugin expect the server to return JSON.

I’ve also started on a Scaffolding plugin for forms, where I can practically use the metadata from the JQuery controller to generate a form. This functionality is not done yet. I’m also planning to support templates for this scaffolding mechanism. I’m at a point in the development where I hope I can get some help from the community. This is a good start, but far away from done, it’s just a Proof of Concept to show off jQuery together with the ASP.NET MVC framework.

Can I use this in my projects?

YES! I’ve attached the source code as a zip file. This code is free to use as you like. I also hope I can get some help from you on further development on these plugins. Also, let me emphasize that this is only a proof of concept, and it has a certain road to walk before I even can call it Beta. I’ve created a project on Codeplex, but I haven’t had time to move the source code over there. After I’m home from vacation I will move the source code.

I spent last weekend outdoors painting the outside of the building my apartment it’s in. It’s a big building, and the painting work seems to be a never-ending job. In order to motivate myself for the monkey work, I synced my iPod with the latest episodes of Dot Net rocks before I went outside.

I turned on the episode about the Java Script library jQuery with Rick Strahl. There been some fuzz in the blogsphere lately about jQuery (Fredrik Karlseth, Rick Strahl), fuzz I haven’t had time to catch up on before now. During the podcast I got more and more excited about this library. After I was done listening to the podcast, I immediately ran inside and sat down in front of my computer, downloaded jQuery and opened Visual Studio and created an empty web project. After a few minutes I had created the jQuery hello world, and I literally took my breath away, I was amazed. Let me do you a favor and introduce you to jQuery! - By the way I totally forgot to paint the rest of the day!

So what is jQuery?

Let me give you the elevator speech to get you up to speed. Java Script is quite easy to learn and use in small scale, but developing large and complex applications in this language and environment is hard. Therefore many developers tends to give the server alone the responsibility to rendering the HTML, and they use server side components like the ASP.NET Ajax Framework when they want to get fancy with AJAX functionality, but they rarely touch Java Script themselves. Why? As I said, complex applications in this language and environment are hard!

So what is jQuery? You probably heard of LINQ or SQL? Both of those are languages for performing dataset operations like selection, grouping, filtering etc. LINQ does it inside the .NET platform on CLR objects and SQL inside databases. I consider both of these to be so called DSLs (Domain Specific Language) which ease the work of dataset manipulation. I like to think of jQuery as a DSL to, not for datasets, but for manipulating the DOM (Document Object Model) inside the browser. It’s built on top of the Java Script language, and it provides you with some smart syntax and expressions to query the DOM. For instance, say you want to select all the link (a) tags in the webpage and assign a specific click event handler to them. You don’t need for-loops and the getElementById function anymore; you just write an expression to “select” all the link tags in the document, and voila you will get the instances to those objects.

Not only is it easy to manipulate the DOM, but it also has built in support for AJAX. You can actually do an AJAX call in one line of code and partial render the result into div object. Like a coworker of mine would have said; it is the icing on the cake. Not only is AJAX easy to program, but you don’t need to think about cross browser issues when using the XmlHttpRequest ActiveX component; the library will handle it for you.

Programming jQuery

Let’s get our hands dirty and do some programming. Let us start with setting up jQuery. Download the Java Script library from the jQuery webpage. The next step is to create HTML file and add a reference to the Java Script file in the header of the page.

Demo 1: Query the DOM (Document Object Model)

In this demo I will show you an example of how to write a simple expression (query) that contains a filtering option. We want to select all the objects in the DOM of type link (a tag) and filter out the links that contains an anchor. An anchor is a link that points to a resource within the HTML document (<a href=”#section”>anchor</a>). The last step in the demo is to override the click event handler by assigning it with a new callback function (line 10).

This samples was a very basic hello world, but hopefully I unveiled the power you get from this library to manipulate the DOM. If your minds start spinning then check out the API documentation, which will give you a great overview of what’s possible.

Demo 2: Ajax

Let’s begin with the form post scenario. Where I override the default submit functionality on the form object in order to avoid the post back to happen in the browser and last but not least do the post asynchronously (AJAX). This will avoid the page to flicker and reload itself.

The post-verb in the HTTP protocol will in most cases enter some data into a web application. Therefore you probably also want to do some partial rendering (update a particular area of the webpage) in order to get the latest data after the post is submitted. The code in the pictures below illustrates this in line 12.

Can I combine jQuery with other technologies?

Yes, of course you can, but you have to redistribute the Java Script file with your application/web application. A technology I’ve been playing a bit with lately is the ASP.NET MVC (Model View Controller) Framework, and jQuery and this Framework is the perfect couple, but that’s another post. I also speculate on the possibility to use it when developing Windows Vista Sidebar Gadgets or Mac OS Widgets.

Where do I start?

The jQuery project has a very good webpage with tons of tutorials and demos. I recommend you to start there. I hope this inspired you to check it out, because jQuery is a library that can do the heavy lifting Java Script in your Web 2.0 applications!