I prefer to use jQuery with my ASP.NET MVC apps than the Microsoft Ajax library. I have been adding a parameter called "mode" to my actions, which I set in my ajax calls. If it is provided, I return a JsonViewResult. If it isn't supplied, I assume it was a standard Http post and I return a ViewResult.

I'd like to be able to use something similar to the IsMvcAjaxRequest in my controllers when using jQuery so I could eliminate the extra parameter in my Actions.

Is there anything out there that would provide this capability within my controllers or some simple way to acplish it? I don't want to go crazy writing code since adding a single parameter works, it just isn't ideal.

I prefer to use jQuery with my ASP.NET MVC apps than the Microsoft Ajax library. I have been adding a parameter called "mode" to my actions, which I set in my ajax calls. If it is provided, I return a JsonViewResult. If it isn't supplied, I assume it was a standard Http post and I return a ViewResult.

I'd like to be able to use something similar to the IsMvcAjaxRequest in my controllers when using jQuery so I could eliminate the extra parameter in my Actions.

Is there anything out there that would provide this capability within my controllers or some simple way to acplish it? I don't want to go crazy writing code since adding a single parameter works, it just isn't ideal.

• javascript
• jquery
• asp-mvc
• ajax

• for anyone confused IsMvcAjaxRequest has now been renamed (as of RC1) to just IsAjaxRequest just specifically to make it patible with other Ajax libraries. please see my post below – Simon_Weaver Commented Jan 31, 2009 at 11:15

4 Answers 4

Here's an except from MVC RC1 release notes - Jan 2009

IsMvcAjaxRequest Renamed to IsAjaxRequest

The IsMvcAjaxRequest method been renamed to IsAjaxRequest. As part of this change, the IsAjaxRequest method was updated to recognize the X-Requested-With HTTP header. This is a well known header sent by the major JavaScript libraries such as Prototype.js, jQuery, and Dojo.

The ASP.NET AJAX helpers were updated to send this header in requests. However, they continue to also send it in the body of the form post in order to work around the issue of firewalls that strip unknown headers.

In other words - it was specifically renamed to be more 'patible' with other libraries.

In addition, for anyone who hasnt read the full release notes but has been using previous versions - even as recent as the beta - I STRONGLY remend you read them in full. It will save you time in future and most likely excite you with some of the new features. Its quite surprising how much new stuff is in there.

Important note: You will need to make sure you upgrade the .js file for MicrosoftAjax.MVC (not the exact name) if upgrading to RC1 from the Beta - otherwise this method won't work. It isn't listed in the release notes as a required task for upgrading so don't forget to.

See Simons answer below. The method I describe here is no longer needed in the latest version of ASP.NET MVC.

The way the IsMvcAjaxRequest extension method currently works is that it checks Request["__MVCASYNCPOST"] == "true", and it only works when the method is a HTTP POST request.

If you are making HTTP POST requests throug jQuery you could dynamically insert the __MVCASYNCPOST value into your request and then you could take advantage of the IsMvcAjaxRequest extension method.

Here is a link to the source of the IsMvcAjaxRequest extension method for your convenience.

Alternatively, you could create a clone of the IsMvcAjaxRequest extension method called IsjQueryAjaxRequest that checks Request["__JQUERYASYNCPOST"] == "true" and you could dynamically insert that value into the HTTP POST.

Update

I decided to go ahead and give this a shot here is what I came up with.

Extension Method

public static class HttpRequestBaseExtensions
{
    public static bool IsjQueryAjaxRequest(this HttpRequestBase request)
    {
        if (request == null)
            throw new ArgumentNullException("request");

        return request["__JQUERYASYNCPOST"] == "true";
    }
}

Checking from an action if a method is a jQuery $.ajax() request:

if (Request.IsjQueryAjaxRequest())
    //some code here

JavaScript

$('form input[type=submit]').click(function(evt) {
    //intercept submit button and use AJAX instead
    evt.preventDefault();

    $.ajax(
        {
            type: "POST",
            url: "<%= Url.Action("Create") %>",
            dataType: "json",
            data: { "__JQUERYASYNCPOST": "true" },
            success: function(data) {alert(':)');},
            error: function(res, textStatus, errorThrown) {alert(':(');}
        }
    );
});

Why don't you simply check the "X-Requested-With" HTTP header sent automatically by most Javascript libraries (like jQuery) ?

It has the value 'XMLHttpRequest' when a GET or POST request is sent.

In order to test it you should just need to check the "Request.Headers" NameValueCollection in your action, that is :

if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    return Json(...);
else
    return View();

This way, you can simply differentiate regular browser requests from Ajax requests.

Ok, I have taken this one step farther and modified my jQuery file to load the additional parameter into the post data, so I don't have to repeat the "__JQUERYASYNCPOST: true" for every call to post. For anybody that's interested, here's what my new definition for $.post looks like:

post: function(url, data, callback, type) {
            var postIdentifier = {};
            if (jQuery.isFunction(data)) {
                callback = data;
                data = {};
            }
            else {
                postIdentifier = { __JQUERYASYNCPOST: true };
                jQuery.extend(data, postIdentifier);
            }

            return jQuery.ajax({
                type: "POST",
                url: url,
                data: data,
                success: callback,
                dataType: type
            });
        }

I added the "postIdentifier" variable as well as the call to jQuery.extend. Now the Helper explained in spoon16's response works without having to add any thing special to my page-level jQuery code.