Ajax.ActionLink not working, Response.IsAjaxRequest() is always false

Question

I have been googling/SO:ing this issue for a while and many seem to be sharing this, but I haven't found any successful solution to my problem.

Using MVC3 and Razor.

1. Master page contains:

   <script src="@Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>

   <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>

   <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

2. AjaxTest.cshtml contains:

   <div id="AjaxTestDiv">content</div>

   @Ajax.ActionLink("Update", "AjaxTester", new AjaxOptions { UpdateTargetId = "AjaxTestDiv" })

3. AjaxTester action method:

   public string AjaxTester()
   {
       if (Request.IsAjaxRequest())
       {
           return DateTime.Now.ToString();
       }
       else
       {
           return "FAIL";
       }
   }
   

I always get the "FAIL" returned, to a blank page, not in the targeted div.

Edit: Also note that if I remove the if (Request.IsAjaxRequest()), I still don't get back anything to the targeted div, but instead a blank page.

Edit2: Looking at the HTML generated, this is my link:

<a data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace"
data-ajax-update="#AjaxTestDiv" href="/Area/AjaxTester">Update</a>

Have tried switching the method to GET, to no avail.

Answer 1

By default ASP.NET MVC 3 uses unobtrusive jquery with all the Ajax.* helpers. So start by getting rid off all MicrosoftAjax scripts (this useless c**p) and put the following instead:

<script src="@Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

and then simply activate unobtrusive AJAX in your web.config (if not already done):

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

Now jquery is going to unobtrusively AJAXify all the links containing those HTML 5 data-* attributes.

Or even better IMHO:

In your view simply:

@Html.ActionLink("Update", "AjaxTester", new { id = "mylink" })

and in a separate javascript file AJAXify this anchor:

$(function() {
    $('#mylink').click(function() {
        $('#AjaxTestDiv').load(this.href);
        return false;
    });
});

Answer 2

Another IE-specific issue that can keep ActionLink from functioning correctly is covered here: ASP.NET MVC - Prevent Cache on Ajax.ActionLinks

Basically, IE sometimes caches Ajax GET requests, so setting the AjaxOption's HttpMethod to POST is a less fragile way to construct an ActionLink:

@Ajax.ActionLink(
       item.Name + " (Ajax link test)",
         "MyActionName",
         routeValues: new { id = item.Id },
         ajaxOptions: new AjaxOptions()
         {
              UpdateTargetId = "divToUpdate",
              InsertionMode = InsertionMode.Replace,
              HttpMethod = "POST"
         })