Context Issue in ASP.NET MVC 3 Unobtrusive Ajax

    Introduction:

          One of the coolest feature you can find in ASP.NET MVC 3 is Unobtrusive Ajax and Unobtrusive Client Validation which separates the javaScript behavior and functionality from the contents of a web page. If you are migrating your ASP.NET MVC 2 (or 1) application to ASP.NET MVC 3 and leveraging the Unobtrusive Ajax feature then you will find that the this context in the callback function is not the same as in ASP.NET MVC 2(or 1). In this article, I will show you the issue and a simple solution.

    Description:

          The easiest way to understand the issue is to start with an example. Create an ASP.NET MVC 3 application. Then add the following javascript file references inside your page,

    <script src="@Url.Content(" mce_src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content(" mce_src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content(" mce_src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content(" mce_src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

          Then add the following lines into your view,

    @Ajax.ActionLink("About", "About", new AjaxOptions { OnSuccess = "Success" })
    <script type="text/javascript">
        function Success(data) {
            alert(this.innerHTML)
        }
    </script>

           Next, disable Unobtrusive Ajax feature from web.config,

    <add key="UnobtrusiveJavaScriptEnabled" value="false"/> 

           Then run your application and click the About link, you will see the alert window with "About" message on the screen. This shows that the this context in the callback function is the element which is clicked. Now, let's see what will happen when we leverage Unobtrusive Ajax feature. Now enable Unobtrusive Ajax feature from web.config,  

    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 

           Then run your application again and click the About link again, this time you will see the alert window with "undefined" message on the screen. This shows that the this context in the callback function is not the element which is clicked. Here, this context in the callback function is the Ajax settings object provided by jQuery. This may not be desirable because your callback function may need the this context as the element which triggers the Ajax request. The easiest way to make the this context as the element which triggers the Ajax request is to add this line in jquery.unobtrusive-ajax.js file just before $.ajax(options) line,

    options.context = element;

           Then run your application again and click the About link again, you will find that the this context in the callback function remains same whether you use Unobtrusive Ajax or not.

    Summary:

          In this article I showed you a breaking change and a simple workaround in ASP.NET MVC 3. If you are migrating your application from ASP.NET MVC 2(or 1) to ASP.NET MVC 3 and leveraging Unobtrusive Ajax feature then you need to consider this breaking change. Hopefully you will enjoy this article too.