MVC 3 Ajax.ActionLink not working

malice picture malice · May 20, 2011 · Viewed 10.8k times · Source

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!

Answer

Omgee Cares picture Omgee Cares · Nov 15, 2012

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>