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:

My client side beginForm method is not invoked at this time. Which i want.
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"/>

nemesv · Accepted Answer · 2012-04-20T20:27:42.110

2

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>

edited Apr 20 '12 at 20:27

answered Apr 20 '12 at 20:22

nemesv

138,284
16
416
359

Getting late for the class, will check this out as soon as i am back. – learning... Apr 20 '12 at 20:38
Thanks for your help. I am now using jquery $.ajax. Following also helped: http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor – learning... Apr 23 '12 at 05:09

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

1 Answers1