MVC 3 Ajax.ActionLink not working
Solution 1
In a new MVC4 Template on the _layout.cshtml
close to the bottom, there is a @Scripts.Render("~/bundles/jquery")
.
I had to include
@Scripts.Render("~/bundles/jqueryval")
which is the Ajax library
This fixed the problem I was having with a full postback using the index page. My action link code:
<div id="timeDisplay">
@Ajax.ActionLink("Click to display server time", "Time", new AjaxOptions { HttpMethod="GET",UpdateTargetId="timeDisplay"});
</div>
Solution 2
I made it work by declaring the following scripts in this exact order:
@section script
{
<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"> </script>
}
For the sake of completeness, in my *_Layout.cshtml* file I declared the following:
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
@RenderSection("script", required:false)
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
Solution 3
Maybe [ this post ] has the answer.
In short: Are the js functions "handleSuccess" and "handleFailure" accessible by the form?
Lg warappa
malice
Updated on June 04, 2022Comments
-
malice almost 2 years
I'm playing around with the some MvcMusicStore example based shop and having some problems with the MVC3 Ajax.ActionLink / Ajax.RouteLink helpers. The problem is that it simply does not generate an Ajax request (Request.IsAjaxRequest() == false). The forms I'm generating using the Ajax.BeginForm / Ajax.BeginRouteForm are working nicely though.
Config:
<appSettings> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings>
Scripts:
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
Link:
@Ajax.ActionLink("show cart", "Show", "Cart", new AjaxOptions() { OnSuccess = "handleSuccess", HttpMethod = "Get", OnFailure = "handleFailure" })
Generate HTML:
<a data-ajax="true" data-ajax-failure="handleFailure" data-ajax-method="Get" data-ajax-success="handleSuccess" href="/Cart/Show">show cart</a>
As said, this works just fine:
@using (Ajax.BeginForm( "Show", new { controller = "Cart" }, new AjaxOptions { OnSuccess = "handleSuccess", OnFailure = "handleFailure" })) { <input type="submit" class="button" /> }
The action looks like this:
[Authorize] public ActionResult Show() { if (Request.IsAjaxRequest()) { ViewBag.CartItems = ShoppingCart.GetCart(this) .Items; return Json(new AjaxResultViewModel() { Content = RenderPartialViewToString(), UpdateTargetSelector = "#dialog", InsertionMode = InsertionMode.InsertBefore }, JsonRequestBehavior.AllowGet); } ViewBag.Exception = new NotSupportedException(); return View("Error"); }
I've been searching for a while now and couldn't find the reason for this behavior, maybe someone could help me out?
Best regards!
-
malice almost 13 yearsHey Warappa, yes the functions are accessible. And since I can tell from the request header it doesn't even create a proper AJAX request. Guess I'll just stick to using the BeginForm helper instead since that one works. Just not the prettiest solution ;)
-
malice almost 13 yearsIn addition: I already got to know the behavior described in your post the hard way. But I'm quite sure since the 2 test links are generated at the same point in html. The first line fails, the second succeeds. strange ;) <a data-ajax="true" data-ajax-failure="handleFailure" data-ajax- success="handleSuccess" href="/Cart/Show">Show cart</a> <form action="/Cart/Show" data-ajax="true" data-ajax- failure="handleFailure" data-ajax-success="handleSuccess" id="form0" method="post"><a href="javascript:void(0)" rel="show cart" id="show- cart">show cart</a> </form>
-
ashes999 about 11 yearsThe Microsoft JS files have been defunct for a while, and obsolete since MVC3 (they're gone in MVC4). The pre-shipped jQuery ones are the official replacement.
-
malice almost 11 yearsI marked this as answer since it seems to solve the problem, even though it's been a while (and a previous version) and i can't test it anymore.
-
Gone Coding over 10 years+1: well done. This kick-started my Ajax.ActionLink (which for no other reason was not firing)