MVC 3 AJAX redirecting instead of updating DIV
I ran into an issue today that took a good part of the afternoon to track down so I thought I would post the story in case it helps anyone else.
I’m using MVC 3 RC1, although this issue and solution should be applicable to future versions of MVC also.
My goal was to setup an AJAX ActionLink that makes an AJAX call and updates a Div on the page.
The problem was that, rather than updating the Div, my page would do a full redirect to the AJAX server-side page. Basically the Javascript to catch the Ajax call wasn’t being fired and the simple <a href> link was followed instead.
Try as I might, I couldn’t get this to work. I setup fresh test pages and made it as simple as I could. Still no luck. Here’s a nice clean walkthrough that I followed verbatim to make sure I didn’t miss anything: http://msdn.microsoft.com/en-us/library/dd381533.aspx
Finally I tracked it down to two issues.
I realized that if I set UnobtrusiveJavaScriptEnabled to false in my web.config file, everything worked. However, I wanted to find out why. The best write-up about it that I found was from Brad Wilson.
So, based on Brad’s post, I realized that the new UnobtrusiveJavaScriptEnabled feature should work with MVC and AJAX.
My current project was created in a build before RC1 so my /Scripts folder was out of date, apparently causing a mismatch of scripts. Note: it’s possible that this never was the issue. I didn’t retrack my steps to confirm. In any case, it’s worth making sure that you have the latest version of the various scripts.
A second issue, and one that I suspect others may run into as well, is that I didn’t have a reference to jquery.unobtrusive-ajax.min.js in my master (or child) page. Since MVC 3 uses UnobtrusiveJavaScript by default, it’s essential that the Javascript files are referenced, otherwise it can break unrelated Javascript, making it obtrusive rather than unobtrusive. Obviously not the desired effect.
The correct scripts that are required for MVC+AJAX plus UnobtrusiveJavaScript are:
- <script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
To be complete, MicrosoftMvcAjax.js wasn’t needed for my simple test, but it will be needed for other things. Also, the jquery version number changes frequently so be sure to update to the latest.
And one more thing, that example uses the new Razor syntax. If you’re not using Razor, then pull the @Url.Content helper and replace with your favorite way to reference the scripts.
Note, you can use Microsoft’s, Google’s or other CDN’s instead. See Scott Guthrie’s blog post about this.
Since most docs and walkthroughs available on the web right now were written before UnobtrusiveJavaScriptEnabled existed, they don’t mention all 5 of these scripts, making them outdated for MVC 3 and on.
Conclusion
So, from my stumbling through this, I’ve come up with three key troubleshooting steps for others running into the same situation.
- make sure that you are correctly referencing the various JavaScript files. You can test by viewing your html source and confirming that the path is correct. Copy and paste the path from the HTML source into your address bar to confirm.
- if you’re moving through different beta versions, be sure to update to the latest
- make sure that you reference ALL five scripts mentioned above.
Happy coding!