MVC3 - Razor, Ajax.BeginForm - client side - OnBegin

Question

When i click the submit button, i directly go to my action. Following 2 are not happening:

1. My client side beginForm method is not invoked at this time. Which i want.
2. Request.IsAjaxRequest is false even though my model has the form input

Trying to find an answer for this problem. The same code works in MVC2, so i must be missing some thing here.

Following 2 MS js files are referenced:

<!-- MS AJAX -->
<script type="text/javascript" src="/Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/Scripts/MicrosoftMvcAjax.js"></script>

Form Code:

@{
        using (Ajax.BeginForm(ActionNames.Index, ControllerNames.CustomerSearch, new {Area = ""}, new AjaxOptions
                                                                                                      {
                                                                                                          HttpMethod = "Post",
                                                                                                          OnBegin = "CustomerSearch.beginForm",
                                                                                                          OnSuccess = "CustomerSearch.successForm"
                                                                                                      }, new {id = "CustomerSearchForm"}))
        {

... form items ...
}
}

Form as it displays on the page:

<form action="/CustomerSearch" data-ajax="true" data-ajax-begin="CustomerSearch.beginForm" data-ajax-method="Post" data-ajax-success="CustomerSearch.successForm" id="CustomerSearchForm" method="post">

... Other Form Items ...
<input type="image" src="/App_Themes/Main/Images/ResponseAction/Buttons/btn_submit.gif" alt="Submit" id="SubmitButton" />
</form>

And here is my CustomerSearch.js, on page load alert(2) shows just fine:

var CustomerSearch = {
    enums: {
        buttonId: "SubmitButton",
        searchResultsContainerId: "CustomerSearchResults"
    },
    beginForm: function () {
        alert(1);
        var $button = $("#" + CustomerSearch.enums.buttonId);
        jMessage("Processing request...", $button, true, false);
        return true;
    },
    successForm: function (context) {
        var $button = $("#" + CustomerSearch.enums.buttonId);
        var $searchResults = $("#" + CustomerSearch.enums.searchResultsContainerId);
        var data = context.get_data();

        jMessageHide();
        $searchResults.html(data).fadeIn(500);
    }
};

alert(2);

My unobtrusive javascript enabled is set to true in web.config:

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

Answer 1

With MVC3 the unobtrusive Ajax helpers:

• Ajax.ActionLink
• Ajax.RouteLink
• Ajax.BeginForm
• Ajax.BeginRouteForm

are using the jquery.unobtrusive.ajax.js file.

So you need to include that js file instead of the MicrosoftAjax ones (MicrosoftAjax files are deprecated in MVC3 and not shipped with MVC4 beta):

<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>