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

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()开发者_如何学C;
       }
       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.

---

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;
    });
});

---

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"
         })

---

For those still facing this issue:

You should have below files in your project somewhere:

If not, below is the nuget package, either download this from nuget manager in your visual studio project or package manager console: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Validation/3.2.11/

Give reference of above added file after the jquery.min.js latest version in either your respective view or layout file:

---

Add the jquery.unobtrusive-ajax.js package in your project and it should work in the expected way.

Include the current script form CDN: https://www.cdnpkg.com/jquery-ajax-unobtrusive

<script src="@Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

or install package NuGet: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/3.2.6 and apply installed bundle.

Note that jquery.unobtrusive-ajax.js and jquery.validate.unobtrusive.js are not equal.

In my case this package was not installed and ajax.action link worked like html.actionLink and rendered entire view instead of inserting partial view in the target div.