Scott Forsyth's Blog

Postings on IIS, ASP.NET, SQL Server, Webfarms and general system admin.

Cloud Resources

IIS Resources

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:

  1. <script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
  2. <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
  3. <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
  4. <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
  5. <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!

Posted: Nov 17 2010, 06:49 PM by OWScott | with 26 comment(s)
Filed under: ,

Comments

Dan Miser said:

Awesome post. I wrote about the redirect vs. div replacement in MVC 2, and just noticed that it was broken on upgrade to MVC 3. Thanks for sharing the solution to this!

# November 19, 2010 10:23 AM

Rich said:

I can't thank you enough.  I had the same exact issue.

# December 10, 2010 7:22 PM

ilennert said:

I am also using ajax but not Ajax.ActionLink, I'm using Ajax.BeginForm and I am also having the same problem as you had , redirecting to a new page instead of updating my DIV.  However I have not been sucessfull at resolving this issue with the suggestions you have given, except if I disable unobtrusive java script.  So I think your on to it but, I ether have something different or there another problem somewhare.  I am also using the newer suit of file that came with MVC 3 RC2.

# December 20, 2010 8:59 PM

ANS said:

thanks.. was converting mvc 2 to mvc 3....already spent 4 hrs. life saver.

# January 21, 2011 1:42 AM

Mufasa said:

Another thanks! Exactly my situation and it fixed it for me too.

# January 29, 2011 5:42 PM

thomasd said:

Thanks! Had exactly the same problem with MVC 3. Many thanks.

# February 4, 2011 5:11 PM

gili said:

Ahh, thanks. (only 3 hours)

And I am following a tutorial. they didn't mention this...

thanks again.

Ron

# February 8, 2011 4:47 PM

Dan said:

Thanks so much!!  I, like everyone else here, wasted hours on this.  It surprises me how hard it is to find accurate, complete information on this. I am relatively new to both Ajax and MVC

# February 16, 2011 11:27 AM

Constantin said:

Thanks a million. Joining the club with 3 hours lost on this s...tuff :)

# February 28, 2011 10:58 AM

AcidByte said:

You made my day !!!! Thanks bro ... struggeled around about 2h

# March 29, 2011 4:05 AM

Shane said:

Thanks! Forgot to include all of the js files when using Ajax.BeginForm.

# May 17, 2011 12:39 PM

OWScott said:

Jonas, if you have to press F5, then it sounds like the server-side rendering works, but the client-side DIV isn't updated.  I would check that the name of the DIV correctly matches the target div in the ajax call.  It's probably something along those lines.

# May 24, 2011 9:25 AM

JonasT said:

Thanks millions, Scott. The issue has been solved. It could have been more obvious if TargetId and div id  wasn't match.

I am rendering partial view inside the div. The problem was controller was retuning result to different partial view name. I was following Razor view new naming system "_namePartial.cshtml". My old partial view was "ParticipantList.ascx" and I changed it to "_ParticipantListPartial.cshtml".

I cannot believe I have been playing around with scripts inside "MicrosoftAjax.js" and "MicrosoftMvcAjax.js". Thanks again, man. You make my day.

# May 25, 2011 6:19 AM

OWScott said:

Janas, glad you figured that out and thanks for the update.  The convention over configuration in MVC can be tricky in a situation like that there it's not obvious which filename is used.  Nice troubleshooting.

# May 25, 2011 9:07 AM

Roger said:

Awsome, thanks for that. I add the reference for jquery.unobtrusive-ajax.min.js And everything worked fine.

# June 16, 2011 6:53 PM

vinnyh said:

Scott - worked perfectly. Thanks so much

# July 6, 2011 6:49 AM

Stephen White said:

Awsome - I wasted a day trying to figure this out thinking it was an IE issue

# July 8, 2011 11:55 AM

Kevin said:

Thanks, this solved a problem I was having with running through the NerdDinner example under MVC3.

# July 10, 2011 4:12 PM

Chinmay Gadre said:

Awesome!

Saved me heck of a time hunting on the net and was able to deliver my solution quicker!

Hats off!

# August 6, 2011 2:54 PM

Adrian said:

Thank you very much!

You saved my day!

I wasted almost two hours dealing with this issue...

# August 15, 2011 5:04 PM

Alec said:

I had exactly the same issue. The script

~/Scripts/jquery.unobtrusive-ajax.min.js was missing.

Good catch OWScott, thanks!

# September 4, 2011 6:47 PM

negm phlestin said:

Thank youuuuuuuuuuuuuuuuuuuu

You saved my day :)

# October 19, 2011 3:20 PM

Michael said:

Thanks for this solution, it saved me from another three hours of wasted time!

# November 21, 2011 9:52 AM

Mark said:

How many sites out there miss the need to reference ~/Scripts/jquery.unobtrusive-ajax.min.js?

Hours already wasted but no more thanks to this article. :)

# January 17, 2012 5:09 PM

hassan said:

thank you; changing unobstrusive to false worked

# January 18, 2012 11:31 AM

Chris said:

Hi Scott

Big thanks for this, I had been trawling through pages and pages until I came across your post and had the problem fixed in 5 mins.

I've spent the last 6 hours trying to fix this so thanks again!

Cheers

Chris

# February 17, 2012 7:30 AM

Christian said:

Thanks so much, the only place where i could find the solution.

setting UnobtrusiveJavaScriptEnabled to false solved the problem.

# May 10, 2012 4:15 PM

Himanshu said:

Thanks.. very much helpful..

# May 17, 2012 8:52 AM

Syam.S said:

Good one really helped me a lot thanks for sharing

# May 24, 2012 8:08 AM

Friend said:

Fixed it.

Many Thanks

# December 18, 2012 4:20 AM
Thanks for sharing your feedback! If your feedback doesn't appear right away, please be patient as it may take a few minutes to publish - or longer if the blogger is moderating comments.
Leave a Comment

(required) 

(required) 

(optional)

(required)