Using JQuery in ASP.NET

I wanted to learn jQuery since its inception and use it in my next project(s). But before jumping into any project I wanted to understand it, evaluate it and see how exactly it can be utilized.

So, this app is my attempt for the same.

I purchased “ASP.NET jQuery Cookbook” which provided me a head start on this and I tried to create an application of my own using the examples provided in the book.

About jQuery:

JQuery is the most widely used JavaScript library in web applications today. Developed by John Resig in 2006, it is supported by an active community of developers apart from the core jQuery team. It is designed to be lightweight, cross browser, and CSS3 compliant. It simplifies the way DOM elements are selected, making it easier to navigate a page. The library has powerful Ajax capabilities, event handling, and animation effects, thus enabling rapid web application development. By allowing the creation of plugins, it enables developers to build powerful capabilities on top of the core jQuery library.

JQuery can be interfaced with numerous web platforms such as ASP, PHP, .NET, and Java. With the official support of Microsoft, it is now distributed with Visual Studio (Version 2010 onwards). Microsoft is also committed to contributing to the library and its jQuery Templates, Data Link and Globalization plugins are now accepted as official jQuery plugins.

Downloading jQuery:

JQuery is available from http://jQuery.com in different types of builds based on the requirements of the application:

• Minified version: This version is preferred for production environments. It has a smaller file size requiring shorter time to download.
• Packed version: This is the compressed version of jQuery. Though it has a smaller file size compared to the minified version, it requires non-trivial time to unpack when downloaded by the browser.
• Uncompressed version: This version is preferred for development environments. It has a larger file size compared to the minified and packed versions, but is suited for debugging in the development phase.

Including jQuery library in your project(s):

There are two ways of including the jQuery library on the web page:

• Using publicly hosted copies from CDNs (Community Development Networks) such as Google and Microsoft.
• Downloading and using a local copy.

Both methods are widely used today, the trend being more towards using CDNs. CDNs have performance benefit in terms of improving caching and parallelism. However, in applications deployed on the intranet or applications that have limited or no Internet access, it might be better to host a local copy on the web server or the local file system.

Observations made during the development of samples:

While developing the examples, I observed that we will have to use “.ClientID” for the controls to be recognized by jQuery selectors.

Also, to ensure the validation plugin works as expected we have to use “.UniqueID” during the validation definition. I had a very tough time in debugging this problem and fixing it as this information is not documented in the book.

We need to use “ClientIDMode=Static” for all the controls to be selected by jQuery. Using this will ensure that the asp.net will not prefix its own control naming algorithm and we get a neat, understandable code after the page is rendered in the browser. An alternative to this would be using “<Control’s ID>.ClientID”.

Other Tips & Tricks:

A developer can write his own custom plugin for jQuery for his project requirement. Though, at this moment writing any custom plugins are out of scope of the current requirement.

I’ve used various plugins available in the internet to ensure that the application works as per my requirement.

Other important information:

In the book a new website is created for every chapter. I have created only 1 solution with 1 web-application and have created folders for each chapter. It’s only my way of writing an application. You are free to write it in any way you want to.

Also, to ensure an optimal performance of the web application, I’m using the CDN to include jQuery in my project. I also have a local copy of the same. If the project is running under debug mode (set in the web.config file), local copy is downloaded. Else, CDN copy is used.

I have also used UI widgets provided by jQueryUI in my project and a custom theme relating to it.

Important links to be followed for further help:

There are various topics available on jQuery in the internet today. You can google to get the necessary information.

Here are the best resources which can provide you any help:

http://www.jquery.com

http://www.jqueryui.com

I have implemented jquery in a few of my customer environment too:
http://webadmin.shortgrasstech.com

Though, to access these website you’ll need valid credentials. But there isn’t any public credentials you can use for testing purposes.

I’m very much impressed by the explanations provided in detail and for every line. I would recommend this book to anybody willing to learn and experience jQuery.
I’ve personally worked on all the examples of the book and have published here.
All the samples are completely updated according to the book and is ready for usage.

I’ve divided the site into chapter and on the topic.
A few things I would like to tell you here is that:
1. If you copy the code from the book blindly, you might run into issues as it does not work as expected.
2. You’ll have to use “ClientIDMode=’Static’” for various controls to ensure it works.

Here are the links for the samples:
Chapter 1: Working with ASP.NET Controls
Chapter 2: Validation of ASP.NET Controls
Initially I had a few issues using the validation plugin with jQuery. After many attempts I was able to fix the issue. Basically, you need to use the to initiate a validation settings for the control.
Chapter 3: Working with GridView Control
Chapter 4: Working with Image Control
Chapter 5: Animations in ASP.NET
Chapter 6: AJAX and ASP.NET (Part I)
Chapter 7: AJAX and ASP.NET (Part II)
Chapter 8: Client Templating in jQuery

I’ve uploaded the zipped source-code of the entire web application here. You can either browse through the web application using above links or download the source code.

I hope you’ll find this work helpful
Do provide your feedback, suggestions to improve or any other information about this through the comment form below.

Thanks,
Manjunath HK

using System.Web.UI;
using System.Web.UI.Adapters;

public class PageStateAdapter : PageAdapter
{
     public override PageStatePersister GetStatePersister()
     {
          SessionPageStatePersister sessionPageStatePersister = null;
          try
          {
               sessionPageStatePersister = new SessionPageStatePersister(this.Page);
               return sessionPageStatePersister;
          }
          catch (ArgumentException argEx)
          {
               return base.GetStatePersister();
          }
     }
}

<browser refID="Default">
     <controlAdapters>
          <adapter controlType="System.Web.UI.Page" adapterType="PageStateAdapter" />
     </controlAdapters>
     <capabilities>
          <capability name="requiresControlStateInSession" value="true" />
     </capabilities>
</browser>