Why doesn't Request.IsAjaxRequest() work in ASP.NET MVC 3?

Question

I'm creating a new project, asp.net mvc3 with Razor, and wanting to turn the LogOn into an ajax request.

HTML

@using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions { HttpMethod="post", OnSuccess="LoginSubmitted"}))
{
}

Controller

if (Request.IsAjaxRequest())
{
    return Json(new { ResultMessage = "Username or password provided is incorrect"});
}
else
{
    ModelState.AddModelError("", "The user name or password provided is incorrect.");
}

Everything else remains the same.

First, looking at the the http response with Fiddler, I notice there is no x-requested-with header. So I add

<input type="hidden" name="X-Requested-With" value="XMLHttpRequest" />

That seems to work, but now what I receive back is a Json object, which isn't being parsed and instead Google Chrome is just rendering the Json to screen by sending back an application/json doc. All the scripts are in place.

I've also done this:

@using (Ajax.BeginForm("Submit", "home", new AjaxOptions { HttpMethod = "Post", OnSuccess="LoginSubmitted"}))
{
}


@section head
{
    <script type="text/javascript">
        function LoginSubmitted(res) {
            alert(res.Message);
        }   
    </script>
}


    public ActionResult Submit(string id)
    {
        if (Request.IsAjaxRequest())
        {
            return Json(new { Message = "Logged In" } );
        }
        else
        {
            return View();
        }
    }

In a form of my own creation, which works fine using the standard helpers.

What's happening?

Darin Dimitrov · Accepted Answer · 2011-03-02 07:29:39Z

8

That's because by default ASP.NET MVC 3 uses jQuery and unobtrusive AJAX instead of the MicrosoftAjax* library. This means that when you write Ajax.BeginForm you will need to include the proper scripts inside your page:

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

and in your web.config make sure that you have unobtrusive javascript enabled:

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

Now you can safely throw away all MicrosoftAjax* script references on your page if you had any, they are no longer used.

This being said personally I never used any of the Ajax.* helpers. I always prefer to have control. So I would write:

@using (Html.BeginForm("LogOn", "Account"))
{
}

and then AJAXify this form using the jquery form plugin:

$(function() {
    $('form').ajaxForm(function(result) {
        alert('form successfully submitted');
    });
});

answered Mar 2, 2011 at 7:29

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Rob Over a year ago

yep, they are all there as standard when you create an MVC app these days

Darin Dimitrov Over a year ago

@Rob Ellis, nope, they aren't. jquery.unobtrusive-ajax.js is not included in your page when you create a new application. It is there in the Scripts folder but not included meaning that there is nothing out there to AJAXify your Ajax.BeginForm helper and because of this it simply sends a normal HTTP request. You should have seen if you used FireBug by the way.

Rob Over a year ago

Hi Darin, I've checked and they're all there. I can view the source and click on the javascript file and receive the content of them. I've checked the web.config for the value too, it's there as well.

Darin Dimitrov Over a year ago

@Rob Ellis, OK, when you use Ajax.BeginForm the unobtrusive helpers won't parse the result automatically to a JSON object in the success callback :-) You will need to do this yourself. Also note that adding a hidden field inside your form with the X-Requested-With seems like a horrible hack. Try looking with FireBug if the request is indeed AJAX or you get some javascript error. Fiddler is not good at this as you only see an HTTP request but can't really make the difference.

Rob Over a year ago

Lol, ok, ok :-) I've written a simple form outside of the login control (I've added the code to my question) which works fine with the ajax helpers. I just can't figure out why the JSON is not being rendered in the LogOn example!

|

Collectives™ on Stack Overflow

Why doesn't Request.IsAjaxRequest() work in ASP.NET MVC 3?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related