Wrapping up my series on some of ASP.NET AJAX’s less utilized client side functionality, this post will take a closer look at some of ASP.NET AJAX’s JavaScript UI helper functions. These methods are great because they abstract away most of the tedious work that comes with supporting cross browser compatibility, leaving us with a nice, consistent API.

Specifically, I’m going to show you examples of using addCssClass, getBounds, getLocation, and setLocation to accomplish a few client side UI tasks.

Easily adding and removing CSS classes

A relatively underused feature of CSS allows you to directly apply multiple CSS classes to the same element. For example, maybe you’ve got an online test and want to style the test results to display correct answers in green and incorrect ones in red. This is one way you might do that:

.answerResult {  font-weight: bold; }
 
.correct      { color: green; }
.incorrect    { color: red; }

Answer #1: <span class="answerResult correct">correct</span>
Answer #2: <span class="answerResult incorrect">incorrect</span>

This is a clean solution to the problem. The markup is semantic and avoids repetition by splitting the highlight from the base styling. However, if we need to manipulate this on the client side, it’s going to take more work than is ideal.

Luckily, the ASP.NET AJAX client side framework provides helper functions to alleviate that complexity. DomElement’s addCssClass and removeCssClass are exactly what we need. Assuming the span was given an ID of answerResult, this is all that would be necessary to dynamically add the CSS for a correct answer:

Sys.UI.DomElement.addCssClass($get('answerResult'), 'correct');

I often use this technique in production by creating CSS classes with the same names as the status states of a field’s range of values. Then, when displaying that data, it’s trivially easy to also add some contextual styling with addCssClass.

Determining the size of an element

If you work on client side UI functionality long enough, you’re eventually going to want to determine the size of HTML elements at runtime. This turns out to be no fun at all, if you want to do it accurately cross-browser. Instead of suffering through that ordeal, you can use DomElement’s getBounds method. It returns an associative array with an element’s size and position.

For example, what if you’ve filled a GridView with an arbitrary amount of data and want to find out how tall it is? How would you go about that?

var height = Sys.UI.DomElement.getBounds($get('GridView1')).height;

It doesn’t get much easier than that, does it?

Locating and moving an element

The final methods that I want to take a look at are getLocation and setLocation. After all, the next logical step after finding the size of something is figuring out where it’s at and moving it around.

For example, let’s say you want to move a div, SomeDiv, 75px to the right:

var loc = Sys.UI.DomElement.getLocation($get('SomeDiv'));
 
Sys.UI.DomElement.setLocation($get('SomeDiv'), loc.x + 75, loc.y);

Throw it in a loop and you’ve got yourself a basic animation:

for (i = 1; i <= 75; i++)
{
  Sys.UI.DomElement.setLocation($get('SomeDiv'), loc.x + i, loc.y);
}

Conclusion

You probably aren’t going to use these functions as often as $addHandler or the base type extensions. However, when you do need them you’re going to be really glad you know about them. They save a lot of work, and help to automatically ensure a level of cross browser compatibility that is tedious to constantly write from scratch.