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 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
}
}
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, however, is that Ajax isn't used, just full page refreshes. So sumat is wrong...
The question is: What is wrong?!
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:
Many thanks to Darin. The answer is worth reading, to enlighten yourself as to the meaning of the two appSettings I had disabled.