MVC 3 Ajax.ActionLink not working

Question

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!

score 10 · Accepted Answer · edited Apr 18 '13 at 18:08

10

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>

edited Apr 18 '13 at 18:08

ashes999

9,925
16
73
124

answered Nov 15 '12 at 06:10

Omgee Cares

427
2
5
12

I 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. – malice Jul 10 '13 at 09:04
+1: well done. This kick-started my Ajax.ActionLink (which for no other reason was not firing) – iCollect.it Ltd Jan 23 '14 at 16:45

score 2 · Answer 2 · answered Feb 21 '12 at 11:51

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>

The 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. — ashes999, Apr 19 '13 at 02:11

score 1 · Answer 3 · edited May 23 '17 at 12:30

1

Maybe [ this post ] has the answer.

In short: Are the js functions "handleSuccess" and "handleFailure" accessible by the form?

Lg warappa

edited May 23 '17 at 12:30

Community

1
1

answered May 20 '11 at 21:05

David Rettenbacher

5,088
2
36
45

Hey 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 May 23 '11 at 06:37
In 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 ;) Show cart
show cart
– malice May 23 '11 at 06:46

MVC 3 Ajax.ActionLink not working

3 Answers3