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!

Daydream

Answer 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>

Aboral

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. – Daydream

+1: well done. This kick-started my Ajax.ActionLink (which for no other reason was not firing) – Crichton

Answer 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>

Uppsala

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. – Staten

Answer 3

Maybe [ this post ] has the answer.

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

Lg warappa

Physostomous

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 ;) – Daydream

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 ;) <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> – Daydream