Question

The Setup:

I have updated an app from ASP.NET MVC 3 to ASP.NET MVC 4.

The app worked fine in MVC 3. The only thing that isn’t working in MVC 4 is Ajax.Begin form: the form defaults to full page requests, instead of async AJAX requests.

Essentially, it is a wizard that I have written, but that is irrelevant. Model.Step.ActionName correctly returns a string (see code below).

The Code:

The code in the View is:

@{ 
    using (Ajax.BeginForm(Model.Step.ActionName, null, new AjaxOptions { UpdateTargetId = "wizardStep", OnBegin="isValid", LoadingElementId="PleaseWait", OnSuccess="SetFocusOnForm" }, 
        new {@name="wizardForm", @id="wizardForm" } ))
{

//form contents

}
}

The Rendering:

I note that Ajax.BeginForm in MVC 4 uses HTML 5. I show the difference between how MVC 3 and MVC 4 render the form below:

MVC 3:

<form action="/Solicitors/Company/New/YourDetails" id="wizardForm" method="post" name="wizardForm" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'PleaseWait', updateTargetId: 'wizardStep', onBegin: Function.createDelegate(this, isValid), onSuccess: Function.createDelegate(this, SetFocusOnForm) });">

// form contents

</form>

MVC 4:

<form action="/Solicitors/Company/New/LoginDetails" data-ajax="true" data-ajax-begin="isValid" data-ajax-loading="#PleaseWait" data-ajax-mode="replace" data-ajax-success="SetFocusOnForm" data-ajax-update="#wizardStep" id="wizardForm" method="post" name="wizardForm" novalidate="novalidate">

// form contents

</form>

I have no idea if this is correct, but assume it is.

The Problem:

The problem, however, is that Ajax isn’t used, just full page refreshes. So sumat is wrong…

The Question:

The question is: What is wrong?!

Answer 1

OK, I have solved this.

In the MVC 3 app, I had commented out the following in the web.config:

<appSettings>
    <add key="webpages:Version" value="1.0" />
    <!--<add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />-->
  </appSettings>

This explains why asp.net mvc 3 was not rendering html 5.

In the new mvc 4 app, the default setting has ClientValidationEnbled=true and UnobstrusiveJavaScriptEnabled=true, as follows:

<appSettings>
    <add key="webpages:Version" value="2.0.0.0" />
    ...
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

So my app needed the following javascript files to be included:

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

And it needed the microsoft*.js files throwing away, ie:

@*<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>*@

I figured this out after reading @Darin Dimitrov’s reply to the following question:

Are MicrosoftAjax.js, MicrosoftMvcAjax.js and MicrosoftMvcValidation.js obsolete as of ASP.NET MVC 3?

Many thanks to Darin. The answer is worth reading, to enlighten yourself as to the meaning of the two appSettings I had disabled.