title: MVC 4 Ajax.beginform submit - causes full postback
body: <p>MVC4 Internet project</p>
  
  <p>I'm using Ajax.BeginForm to do a Postback with validation and it posts back the entire page rather than just the UpdateTargetID. I've looked at other posts on SO and haven't found the answer.  I've built a new MVC4 Internet project just for testing (VS 2012 has been updated with 'ASP.NET and Web Tools 2012.2').</p>
  
  <p>Here's my code</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public ActionResult Index() 
  {
    var vM = _db.Students.FirstOrDefault(); return View(vM);
  }
  
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Index(Student vM)
  {
    if (ModelState.IsValid)
    { //code if Model valid
      return Json(new { url = Url.Action("About", "Controller") });
    }
    ModelState.AddModelError(string.Empty, "AJAX Post");
    return PartialView("Index", vM);
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model AJAX_Test.Models.Student
  @{ ViewBag.Title = "Student"; }
  &lt;script src="~/Scripts/jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;  var onSuccess = function (result)
  {
    if (result.url) { window.location.href = result.url; } 
  }
    // when server returns JSON object containing an url property redirect the browser    &lt;/script&gt;
  &lt;h1&gt;@ViewBag.Title&lt;/h1&gt;
  &lt;div id="IDXForm"&gt;
  @using (Ajax.BeginForm("Index", new AjaxOptions() { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess", HttpMethod = "Post" }))
  {   
    @Html.AntiForgeryToken() @Html.ValidationSummary(true) 
    &lt;span&gt;@Html.EditorFor(m =&gt; m.FirstName) @Model.EnrollmentDate.ToShortDateString()&lt;/span&gt; &lt;input type="submit" value="Submit" /&gt;                   
  }
  &lt;/div&gt;
  </code></pre>
  
  <p>The initial view is:
  <img src="https://i.stack.imgur.com/Z8mqv.png" alt="enter image description here"></p>
  
  <p>After Submittal:
  <img src="https://i.stack.imgur.com/TUW4K.png" alt="enter image description here"></p>
  
  <p>Source code for body after submittal:</p>
  
  <pre><code>        &lt;div id="body"&gt;
  
              &lt;section class="content-wrapper main-content clear-fix"&gt;
  
  &lt;script src="/Scripts/jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;  var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } }
    // when server returns JSON object containing an url property redirect the browser &lt;/script&gt;
  &lt;h1&gt;Student&lt;/h1&gt;
  &lt;div id="IDXForm"&gt;
  &lt;form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#IDXForm" id="form0" method="post"&gt;&lt;input name="__RequestVerificationToken" type="hidden" value="vkCszJu-fKT6zUr5ys2StOTPF6a9pZdj5k1MyaAZKo8MPweS53dUuni0C9B17NjL_GVydHa7-jI1H0F9HrYEdKxeCWq9mCeER3ebaZYLxIs1" /&gt;&lt;span&gt;&lt;input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Carson" /&gt; 9/1/2005&lt;/span&gt; &lt;input type="submit" value="Submit" /&gt;                                                                                                     
  &lt;/form&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Can anyone see what is wrong with my code?</p>
  
  <p>Thank you.</p>