Microsoft Ajax Minifier

One good thing I came across at the Microsoft MVP Summit is that Microsoft released Ajax Minifier, a tool to compress the size of Javascript (.JS) and Cascading Style Sheets (.CSS) files. Later I found a Scott Gu post on it.

The Microsoft Ajax Minifier is a small tool to remove unnecessary content from your js or css file. It can bring down the size of js file by 60%. You can download the Ajax Minifier from here.

After installing the tool, you will get a command prompt

image

and let’s say I have a js file with name “Validations.js” Let’s try minifying the file using this tool

A point to note here is:
Original Size: 7710 bytes; reduced size: 4918 bytes (36.2% minification)
Gzip of output approximately 1586 bytes (67.8% compression)

Currently the Ajax Minifier ships with two modes of

  1. Normal Crunching
  2. Hyper Crunching

With normal mode, it removes extra whitespace, all comments etc. When you use Hyper crunching mode it takes some more additional steps that includes shorting the name of local variables etc.

In order to use hyper crunching mode you need to add –hc switch in the command line. For instance:

ajaxmin validations.js –hc –o validations.min.js

So go ahead and try it out. Another great thing is that Ajax Minifier can be integrated with Visual Studio as well, which I will cover in the next post.

Real World Scenario: Month Based Selection using AJAX Calendar Extender

Often we get requirement of enabling only month based selection in calendar control in which a calendar should display only month instead of dates or you can say a calendar that allow users to pick month only. This can be achieved by manipulating functionality of AJAX Calendar extender using JavaScript.

First, you need to set the behaviorID property of Calendar extender control and add two event handler “OnClientHidden” and “OnClientShown”. For instance,

<asp:TextBox ID="txtDate" runat="server" ReadOnly="false" onfocus="AjaxDateOnFocus(this);" Width="60px" onblur="AjaxDateOnBlur(this);" />
<
cc1:CalendarExtender ID="ctxtDate" runat="server" TargetControlID="txtDate" Format="MMM-yyyy" OnClientHidden="onCalendarHidden" OnClientShown="onCalendarShown" BehaviorID="calendar1" />

Now use the following JavaScript with respective BehaviorID

function onCalendarShown() {
var cal = $find("calendar1"); //Setting the default mode to month
cal._switchMode("months", true); //Iterate every month Item and attach click event to it
if (cal._monthsBody) {
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
}
}
}
}

function onCalendarHidden() {
var cal = $find("calendar1");
//Iterate every month Item and remove click event from it
if (cal._monthsBody) {
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
}
}
}
}

function call(eventElement) {
var target = eventElement.target;
switch (target.mode) {
case "month":
var cal = $find("calendar1");
cal._visibleDate = target.date;
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
}
}

That’s all 🙂 and your calendar extender will now look like

image

Enjoy!

Please note that the script is partially taken from AghaUsman.net