In my last post, I began a series exploring ASP.NET AJAX’s client side functionality. If you missed it, you can catch up by reading that post about the various uses of $addHandler.

In this post, I want to take a look at a few more under-appreciated tools that we’re provided with as a part of the framework: Base type extension methods.

Specifically, I’m going to provide some examples of using Array.contains, Date.format, and String.format.

Detecting UpdatePanel refreshes with Array.contains

As you may know, EndRequest’s sender._panelsToRefreshIDs contains a JavaScript array representing which UpdatePanels are being refreshed in the completing partial postback. I’ve seen a lot of code that leverages this by looping through the array and checking each element for a particular ClientID. However, ASP.NET AJAX’s extensions to the base JavaScript Array type provides us with a more elegant way of doing this:

function EndRequest(sender, args) {
  // This will do something, only if UpdatePanel1 is being refreshed.
  if (Array.contains(sender._panelsToRefreshIDs, 'UpdatePanel1'))
    DoSomething();
}

Additionally, the Array type extensions also includes methods such as Array.add, Array.insert, Array.remove, and more. The ASP.NET AJAX documentation contains information on them all.

Simplify formatting client side dates with Date.format

If you’ve spent much time working with dates in JavaScript, you know what a hassle it can sometimes be. To greatly ease this, ASP.NET AJAX extends the JavaScript Date object with a formatting function that closely mimics the ToString formatting paradigm that we’ve been using for years. Here are a few examples:

var today = new Date('12/3/2007');
 
var shortDate = today.format('d');
// d formats the date as MM/dd/yyyy
// shortDate == '12/03/2007'
 
var longDate = today.format('D');
// D formats the date as dddd, dd MMMM yyyy
// longDate == 'Monday, 03 December 2007'
 
var customDate = today.format('MMMM, yyyy');
// Custom format string to format the date as MMMM, yyyy
// customDate == 'December, 2007'

Date.format accepts most of the standard DateTime format strings, such as d and D. If none of those suit your needs, Date.format also provides almost unlimited flexibility via custom formatting strings. For a full list of formatting string parameters, see the Standard DateTime Format Strings and Custom DateTime Format Strings reference pages on MSDN.

String plus Number, divided by Date?!

JavaScript is a weakly typed language. That is to say, a given variable’s type is only known at runtime. Since string concatenation and mathematical addition are both accomplished through the same operator, this can cause a bit of confusion. For example:

var a = 11; b = 22; c = '33';
 
alert(a + b + c);
// Due to type inference, a + b + c == 33 + '33' == '3333', 
//  not the '112233' you might expect.

Among the base type extensions provided by ASP.NET AJAX, a static format method has been added to the String class. Like Date.format, String.format works almost identically like its namesake method in the .NET framework:

var a = 11; b = 22; c = '33';
 
alert(String.format('{0}{1}{2}', a, b, c));
// As desired, the alert will now be '112233'.

String.format also accepts the formatting strings supported by the base type of the substitution variable. For example:

var result = String.format('Date: {0:d}', new Date('12/3/2007'));
// result == 'Date: Monday, 03 December 2007'

Even if you set aside the type inference issues, I find it extremely useful to be able to format my strings with almost identical code on both client and server side. Hopefully, you’ll find it helpful too.

Conclusion

As you can see, ASP.NET AJAX improves quite a few aspects of JavaScript’s base types. If these few examples have whetted your appetite for more, make sure you take a look at the JavaScript Base Type Extensions documentation.

It’s worth noting that just because the framework provides an extension method for a task, that doesn’t mean it’s the best way to accomplish the task. Consider Array.forEach, for example. I’m really not sure what the intended benefit of Array.forEach is, but a regular JavaScript for-loop is easier to use and more readable in every scenario I can think of.

In other words, while these extension methods are tremendously useful, they aren’t an excuse to avoid familiarizing yourself with traditional JavaScript development.