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?

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