title: ASP.NET MVC 4 - Ajax.BeginForm and html5
body: <h2>The Setup:</h2>
  
  <p>I have updated an app from ASP.NET MVC 3 to ASP.NET MVC 4.</p>
  
  <p>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.  </p>
  
  <p>Essentially, it is a wizard that I have written, but that is irrelevant.  Model.Step.ActionName correctly returns a string (see code below).</p>
  
  <h2>The Code:</h2>
  
  <p>The code in the View is:</p>
  
  <pre><code>@{ 
      using (Ajax.BeginForm(Model.Step.ActionName, null, new AjaxOptions { UpdateTargetId = "wizardStep", OnBegin="isValid", LoadingElementId="PleaseWait", OnSuccess="SetFocusOnForm" }, 
          new {@name="wizardForm", @id="wizardForm" } ))
  {
  
  //form contents
  
  }
  }
  </code></pre>
  
  <h2>The Rendering:</h2>
  
  <p>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:</p>
  
  <p><strong>MVC 3:</strong></p>
  
  <pre><code>&lt;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) });"&gt;
  
  // form contents
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>MVC 4:</strong></p>
  
  <pre><code>&lt;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"&gt;
  
  // form contents
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I have no idea if this is correct, but assume it is.</p>
  
  <h2>The Problem:</h2>
  
  <p>The problem, however, is that Ajax isn't used, just full page refreshes.  So sumat is wrong...</p>
  
  <h2>The Question:</h2>
  
  <p>The question is:  What is wrong?!</p>