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("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script 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.
SyntaxHighlighter.all()
