The Microsoft Ajax Library

I’m a big Fan of the new new Microsoft Ajax library. It combines what was previously AJAX and the Ajax Control toolkit into one library. As an added bonus, the new library contains a client side only version of all the controls in the control toolkit. So that means you can use any of the ui enhancements in mvc pages and really any web based framework.

The library is still in beta, but it’s already showing great promise.

In this post I’m going to be going over some customization features of the client side calendar control. You can read the basics about using the calendar control here .

The first issue we are going to tackle is how to set the date format. By default the calendar control returns a string with the format “MM/dd/yyyy”. However, this may not work for all locales and fortunately the control is configurable. We can easily change the format by calling the set_format function and passing in the desired format.

Sys.require(Sys.components.calendar, function () {
    var calendarControl = Sys.create.calendar("#travelDate");

Now when you select a date it should show up in the dd/MM/yyyy format. Selecting December 6th, 2009 in the calendar now returns the string “06/12/2009”.

The second calendar feature I’d like to go over is how to use an html button to show the calendar. It’s actually quite simple and basically you just have to add an onclick handler to the button. Then in the handler function call the controls show() method. Let’s expand on our previous example and add a “Show” button.

First lets add the html markup:

<input id="travelDate" />
<input type="button" onclick="showCalendar()" name="btnShowDate" id="btnShowDate" value="Show" />

Notice, btnShowDate has an onclick property that’s set to “showCalendar()”. This tells the browser to fire the showCalendar javascript function when the button is clicked.

Now, here’s the javascript code that should go in the head section:

<script type="text/javascript">
    var calendarControl;
    Sys.require(Sys.components.calendar, function () {
        calendarControl = Sys.create.calendar("#travelDate");
    function showCalendar() {;

The calendarControl variable is declared outside of the Sys.require function scope. This allows us to access it later from showCalendar. As you can see showCalendar is a very simple function and really just a wrapper for There is no reason why you can’t call directly in the onclick, but I like to keep things separated this way in case I have to make modifications later or decide to do any other processing before showing the form.

As you can see the calendar is a very powerful client side control. Although the library is still in beta, I’m very excited to learn more about it and create some really awesome javascript pages.


Form defaultbutton attribute in mvc

In webforms you can add an attribute called “defaultbutton”. This instructs the form as to which button to fire off when the user hits the enter key on the keyboard. This makes a lot of sense, since webforms uses an event driven model. In order to implement this though, a little bit of javascript had to be used. You see the html form tag does not support a default button attribute. So the webforms implementation simply assigns an onkeypress handler to the form and triggers a button click.

Well what about mvc? Adding a defaultbutton attribute to an mvc form won’t really do anything. The attribute will render, but the browser won’t know what to do with it and simply ignore it.

So what if you still wanted this behavior? Imagine you have a Submit button and a Clear button on the page and you wanted the submit button to be the default. Currently the form will post if you hit enter, but it won’t send any button values across. We can however come up with a solution using JQuery.

First let’s add the html markup

<%using (Html.BeginForm("DefaultButtonTest", "Home", FormMethod.Post, new { defaultbutton = "SubmitButton",id="MainForm" })){%>
    <input type="submit" name="btnSubmit" id="SubmitButton" value="Submit" />
    <input type="submit" name="btnSubmit" id="CancelButton" value="Cancel" />

Notice I used different id’s for the buttons but a single name attribute. This is because in my controller’s action method I only want one input parameter. In the BeginForm helper method I passed in html attribute values, one of which is the default button Id and this is what we will use in javascript.

Note: Make sure you include a reference to the JQuery library. The easiest way to do this is via the CDN. In the head section, add a reference like so:

<script src="" type="text/javascript"></script>

Ok now let’s add some code to handle the default button.

<script type="text/javascript">
    var ButtonKeys = { "EnterKey": 13 };
    $(function() {
       $("#MainForm").keypress(function(e) {
       if (e.which == ButtonKeys.EnterKey) {
                var defaultButtonId = $(this).attr("defaultbutton");
                $("#" + defaultButtonId).click();
                return false;

Here we bind a keypress handler function the the MainForm. In there we check to see which key was pressed (Note I’m using a small javascript object to encapsulate the enter key’s keycode, I think it makes the code more readable.) If the user did press enter we extract the defaultbutton attribute, use a JQuery selector to reference it and call it’s click function.  Pretty straight forward.

How to get the name of the current controller and action method in mvc

I recently came across an interesting question on the mvc forums. Someone asked how to find the name of the current controller and action method from within the action method itself.

After a little bit of research, I was able to write the following code snippet.

public ActionResult Show(){
    string controllerName = (string)this.ValueProvider["controller"].RawValue;
    string actionName = (string)this.ValueProvider["action"].RawValue;
    return View();

By extracting the “controller” and “action” values from the ValueProvider dictionary we can the name of the current controller as well as the current action in string format. I can see a few scenarios where this might be helpful, one of which would be logging.

But What about the View? Is it possible to get the name of the controller and action method in the view? Yes, and this is how it’s done: