Why start using jQuery with ASP.Net?

I have been working with internet technologies now for over ten years and for most of those I have worked with Microsoft technologies, such as ASP or ASP.Net.

For most of this time there has always seamed to be a massive disconnect between the backend ASP or ASP.Net code and the front end HTML, CSS and JavaScript. I have often found that when people build sites using technologies like ASP.Net they ignore the power of JavaScript especially, instead either doing things through backend code or using another technology, such as Flash.

This is, I think, because:

• As most screen readers do not support JavaScript, any critical functionality that is implemented in JavaScript needs to also be implemented in backend code. This increases the development time.
• Documentation on how to access the HTML rendered by ASP.Net controls via front end JavaScript is very limited
• Most people find JavaScript development tools limited in their functionality and therefore development is more difficult than backend development using tools like Visual Studio.
• Various browser implementations of JavaScript are massively different, this causes many compatibility headaches.

This is why I was very interested in the announcement announcement that Microsoft where going to start shipping jQuery, the JavaScript library, with Visual Studio. This should be a real boast to JavaScript integration with ASP.Net and means ASP.Net developers have no excuse now not to learn JavaScript.

Creating a Fading Gallery control.

Part of a project I was asked to quote for included changing an existing Flash movie, where company logo’s where faded in and out every few seconds in a random order. As I’m not a Flash developer I got the idea to re-develop the movie using JavaScript and this is where the idea for this post came from.

The first advantage I could see of using JavaScript over Flash was that Flash is a black box where accessibility and SEO are concerned. With a JavaScript solution, the JavaScript would be used to modify a standard HTML tag, therefore it would be its own accessible fallback if JavaScript was disabled or unsupported.

The HTML construct

The HTML construct for this solution is very simple, being just an img tag within a div.

<div>
<img id="image1" src="./Duck-thumb.jpg" alt="Duck swimming in a pond." title="Duck swimming in a pond." width="300" height="200" />
</div>

Personalizing the controls

Part 2 of this post will be about wrapping this HTML and JavaScript as an ASP.Net control. Therefore, when designing the JavaScript code it was important to make it easy to specify the values that the designer will want to personalize. All of these values where declared as variables, allowing values to be inserted when the controls HTML and JavaScript code is generated.

var imageId = '#image1';
var interval = 10000;
var fadeTime = 2000;

var crtImg = 0;
var imgs = [{image: './Duck-thumb.jpg', text: 'Duck swimming in a pond.'},
{image: './Dinghy-thumb.jpg', text: 'Dinghy sailing on a lake.'},
{image: './Gorse-thumb.jpg', text: 'Gorse flowers.'}];

Through these values it is possible to personalize the control by specifying the id of the img control, this is necessary as ASP.Net controls modify the id of controls they generate to guarantee that they are unique, the interval between fades, and the length of the fade and the array of images to be displayed.

Starting the gallery

We will want the gallery to start working immediately the page finishes loading. Luckily jQuery has a function that executes on Page Load, the $(function(){...}); construct. Normally this method is used to wire up any event handlers, etc. Here we call the setTimeOut function. When the specified time interval is over, the fadeOutFunction function is called.

$(function()
{
setTimeout('fadeOutFunction()', interval);
});

Fading the image

First we start by fading the image out. jQuery has two functions , fadeOut() and fadeIn(), that will change the specified tags opacity over a specified time period.

With jQuery you can use CSS style selectors to retrieve the require tag. In this example, $(imageId), where imageId is the string '#image1', it is used to select the img tag.

The fadeOut() function is executed on this img tag. You can also specify both a fade out period and a function to be executed after the fade out has finished. To make sure that everything happens in the right order the image change and fade in are specified in the function fadeInFunction(), which is called after the fade out has finished.

function fadeOutFunction()
{
$(imageId).fadeOut(fadeTime, fadeInFunction);
}

Doing the image switch

Once the image has faded out, another image definition is randomly selected. To make sure that the same image is not shown twice in a row, we keep a track of the last image number shown and repeat the random selection until another number is returned.

function fadeInFunction();
{
var imgId;
do {
imgId = Math.round(Math.random()*imgs.length);
if(imgId == imgs.length) imgId = 0;
}while (imgId == crtImg)
crtImg = imgId;

Next we need to change the img tag’s source, alternative text and title attributes. To do this we use the jQuery attr() function. jQuery allows you to chain function calls one after another on a single line of code. Here we use this technique to change the src, alt and title attributes of the tag in one easy to read line of code.

After this we just need to fade the img tag back into view, using the fadeIn() function.

$(imageId).attr('src', imgs[crtImg].image).attr('alt', imgs[crtImg].text)
.attr(';title', imgs[crtImg].text);
$(imageId).fadeIn(fadeTime);
setTimeout('fadeOutFunction()', interval);
}

The JavaScript timer functionality needs to be reset after the period expires. To make the process continuous we need to call setTimeout() again before we finish.

The front end finished

At this point we have our HTML/JavaScript construct working. In part 2 of the post we look at wrapping this front end control up as an ASP.Net control and allowing designers to personalize it.

Once the control is finished you will be able to configure it’s settings either from within front end code or via the design view, within the ASPX page.

You can download example code files of the HTML and JavaScript here.