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