title: mvc3 partial view ajax post returning the partial view as a page
body: <p>I'm writing a tabbed page websystem in ASP.NET MVC3 and when I use ajax.BeginForm. The partial view isn't used to update the div but is show as a page. </p>
  
  <p>What is wrong with the code? And why isn't it working? Thanks for the help!</p>
  
  <p>I'm to figuring it out but can't get my head around it. Here is my code:</p>
  
  <p>Controller:</p>
  
  <pre><code>public ActionResult Index(int id)
      {
          var shareholder = db.shareholder.Include("company").Include("groups");
          return PartialView("Index", shareholder.ToList());
      }
  
      //
      // GET: /Shareholder/Create
  
      public PartialViewResult Create()
      {
          ViewBag.company_id = new SelectList(db.company, "id", "name");
          ViewBag.groups_id = new SelectList(db.groups, "id", "name");
          return PartialView("Create");
      }
  
      //
      // POST: /Shareholder/Create
  
      [HttpPost]
      public ActionResult Create(shareholder shareholder)
      {
          if (ModelState.IsValid)
          {
              db.shareholder.AddObject(shareholder);
              db.SaveChanges();
              return RedirectToAction("Index", new { id = shareholder.company_id });
          }
  
          ViewBag.company_id = new SelectList(db.company, "id", "name", shareholder.company_id);
          ViewBag.groups_id = new SelectList(db.groups, "id", "name", shareholder.groups_id);
          return PartialView("Create", shareholder);
      }
  </code></pre>
  
  <p>partial View:</p>
  
  <pre><code>    &lt;script src="&lt;%: Url.Content("~/Scripts/jquery.validate.min.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %&gt;"
      type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/MicrosoftAjax.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;% using (Ajax.BeginForm("Create", "Shareholder", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "tabs-2", InsertionMode = InsertionMode.Replace }))
     { %&gt;
  &lt;%: Html.ValidationSummary(true) %&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;shareholder&lt;/legend&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.company_id, "company") %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.DropDownList("company_id", String.Empty) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.company_id) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.name) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.EditorFor(model =&gt; model.name) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.name) %&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Create" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;% } %&gt;
  &lt;div&gt;
      &lt;%: Html.ActionLink("Back to List", "Index") %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The view that is calling the partial view:</p>
  
  <pre><code>&lt;script src="&lt;%: Url.Content("~/Scripts/jquery.validate.min.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %&gt;"
      type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/MicrosoftAjax.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var count = 2;
      $(document).ready(function() {
          $("#tabs").tabs();
          getContentTab (1, "/Company/Details/&lt;%=Model.id %&gt;");
      });
  
      function getContentTab(index, url) {
          $.ajax({
              url: url,
              success: function(result) {  
                  for (var i = 0; i &lt;= count; i++) {
                      document.getElementById("tabs-" + index).style.display = 'none';                     
                  }
                  $("#tabs-" + index).html(result);
                  document.getElementById("tabs-" + index).style.display = 'block';
                  $.validator.unobtrusive.parse("form"); 
              },
              error: function (xhr, status, error) {
                  alert(error);
              },
          });
      }
  &lt;/script&gt;
  &lt;h2&gt;
      &lt;%=Model.name %&gt;&lt;/h2&gt;
  &lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tabs-1" onclick="getContentTab(1, '/Company/Details/&lt;%=Model.id %&gt;');"&gt;
              &lt;%= VOWWebsite.Resource.Details%&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-2" onclick="getContentTab(2, '/Shareholder/Index/&lt;%=Model.id %&gt;');"&gt;
              &lt;%= VOWWebsite.Resource.Shareholders%&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="tabs-1"&gt;
      &lt;/div&gt;
      &lt;div id="tabs-2"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>