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

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?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating