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.
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.
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.
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.
So, from my stumbling through this, I’ve come up with three key troubleshooting steps for others running into the same situation.
- 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.