Request.IsAjaxRequest() always returning false in MVC4, tried all suggestions in SO, etc

Question

Let me start off by explaining all the possible solutions I've tried. I now have jquery-unobtrusive-ajax.min.js inside my scripts folder and have added it to a bundle. I've tried referencing it on the view page itself, along with the _Layout.cshtml page also, this is how I have the bundle currently:

//BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-1.10.2.min.js",
            "~/Scripts/modernizr-2.6.2.js",
            "~/Scripts/jquery.validate.min.js",
            "~/Scripts/jquery.unobtrusive-ajax.min.js"));

This bundle is referenced in the main layout view page that all my other views are derived from:

//_Layout.cshtml (at bottom of view, right before hitting </body></html>)
@Scripts.Render("~/bundles/jquery")

Lastly in web.config, I've added these keys to the app settings:

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

Now that that has been stated, this is what my Ajax call looks like. I'm trying to return some data from a stand alone page and replace it with what's in the main page, fairly straightforward I would think:

@Ajax.ActionLink("Edit", "Index", "WeeklyTarget",
    new {id = item.WeeklyTargetId},
    new AjaxOptions {HttpMethod = "GET", UpdateTargetId = "hoursEdit", InsertionMode = InsertionMode.Replace})

When this action link is clicked form the index view this is called from the controller:

public ActionResult Index(int? id, IEnumerable<WeeklyTarget> selection )
{            
    if (Request.IsAjaxRequest())
    {
    // return the partial view here
    }
}

But as stated in my title, Request.IsAjaxRequest() will still always return false. What gives??? Please help... I've exhausted all ideas, tweaks, and work arounds I could possibly think of. I even tried clearing out my caches, cleaning solutions, etc.

Answer 1

So... the issue was that jquery-unobtrusive-ajax.min.js was referencing the deprecated jQuery method .live(). I was able to see this as an error being thrown in chrome's developer console as I was debugging. This will only happen if you use versions of jQuery past 1.9 (I was using 1.10.2). It was deprecated in 1.7 but removed completely in 1.9.

The solution was to add in another jquery library jquery-migrate-1.2.1.js which can be found here: https://github.com/jquery/jquery-migrate#readme and more specifically (for development, not production purposes) here: http://code.jquery.com/jquery-migrate-1.2.1.js. I saved and included this library in my BundleConfig.cs scripts and the rest began working as intended. I hope this will help others.

Answer 2

Problemes with ajax requests not syncing perfectly with miscrosoft helper methods, like IsAjaxRequest() arise when you miss - jquery.unobtrusive-ajax.min.js you can install it : 1. open nuget packet manager 2. run command Install-Package Microsoft.jQuery.Unobtrusive.Ajax

original info can be found here: https://www.devexpress.com/Support/Center/Question/Details/Q508048

wish you alot of sun this summer

Answer 3

If using AngularJs and $resource, you might need to add this

myAppModule.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}]);

see this link