title: mvc submit form partialview in jquery modal duplicating form
body: <p>I followed Darin Dimitrov's example to submit a form (with validation) in a modal dialog:</p>
  
  <p><a href="https://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor">Using Ajax.BeginForm with ASP.NET MVC 3 Razor</a></p>
  
  <p>It works perfectly with on exception. When I submit the form with intentional errors, I end up with two copies of the form in the dialog:</p>
  
  <p><img src="https://i.stack.imgur.com/VvsKl.png" alt="duplicate forms"></p>
  
  <p>Here is my partial view:</p>
  
  <pre><code>@model MvcAppTemplate.ViewModels.SupportClass1ViewModel
  &lt;script src="~/Scripts/Jquery/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function () {
          $('#SupportClass1Name').focus();
  
          $('form').submit(function () {
              if ($(this).valid()) {
                  $.ajax({
                      url: this.action,
                      type: this.method,
                      data: $(this).serialize(),
                      success: function (result) {
                          $('#result').html(result);
                      }
                  });
              }
              return false;
          });
      });
  &lt;/script&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  @using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
  {
      @Html.AntiForgeryToken() 
      @Html.ValidationSummary(true, "The following errors occurred:", new { style = "color: red" })
      &lt;fieldset&gt;
          &lt;legend&gt;MyMainClass1&lt;/legend&gt;
          @Html.ValidationMessage("CustomError", new { @class = "error" })
          @Html.HiddenFor(model =&gt; model.IsNew)
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-3 control-label"&gt;
                  @Html.LabelFor(model =&gt; model.SupportClass1Name)
              &lt;/div&gt;
              &lt;div class="col-lg-6"&gt;
                  @Html.TextBoxFor(model =&gt; model.SupportClass1Name, new { style = "width: 400px;", @maxlength = "50" })
                  @Html.ValidationMessageFor(model =&gt; model.SupportClass1Name)
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-3 control-label"&gt;
                  @Html.LabelFor(model =&gt; model.Active)
              &lt;/div&gt;
              &lt;div class="col-lg-6"&gt;
                  @Html.EditorFor(model =&gt; model.Active, new { style = "width: 150px;" })
                  @Html.ValidationMessageFor(model =&gt; model.Active)
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p&gt;
              &lt;input type="submit" value="Create" class="btn btn-primary" /&gt;
              @Html.ActionLink("Cancel", "Search", "SupportClass1", null, new { @class = "btn btn-default" })
          &lt;/p&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>The view I call the modal from:</p>
  
  <pre><code>@model MvcAppTemplate.ViewModels.SupportClass1ViewModel
  
  @{
      ViewBag.Title = "Test";
  }
  &lt;link href="~/Scripts/jquery-ui-1.11.1.custom/jquery-ui.min.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/dataTables.bootstrap.css" rel="stylesheet" /&gt;
  &lt;script src="~/Scripts/jquery-ui-1.11.1.custom/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#dialog').dialog({
              autoOpen: false,
              width: 600,
              height: 400,
              resizable: true,
              title: 'Support Class 1',
              modal: true,
              open: function (event, ui) {
                  $(this).load("@Url.Action("CreateDialog", "SupportClass1")");
               },
               buttons: {
                   "Close": function () {
                       $(this).dialog("close");
                   }
               }
           });
          $("#opener").click(function () {
              $("#dialog").dialog("open");
          });
      });
  &lt;/script&gt;
  
  &lt;div id="dialog" title="Create" &gt;Please wait&lt;/div&gt;
  &lt;button id="opener"&gt;Show Class&lt;/button&gt;
  </code></pre>
  
  <p>And finally my controller:</p>
  
  <pre><code>// create in a pop up dialog
  public ActionResult CreateDialog()
  {
      var lvm = new SupportClass1ViewModel
      {
          IsNew = true,
      };
      return PartialView("_CreateDialog",lvm);
  }
  
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult CreateDialog(SupportClass1ViewModel lvm)
  {
      SupportClass1 supportClass1 = new SupportClass1();
      // Use Injector to handle mapping between viewmodel and model
      supportClass1.InjectFrom(lvm);
  
      try
      {
          if (ModelState.IsValid)
          {
              supportClass1Service.CreateSupportClass1(supportClass1);
              // redirect to the myMainClass1 view
              //return RedirectToAction("Details", "SupportClass1", new { id = supportClass1.SupportClass1Id });
              return Content("Thanks", "text/html");
  
          }
      }
      catch (DataException de)
      {
          //Log the error (add a variable name after DataException)
          var s = de.InnerException.ToString();
  
          ModelState.AddModelError("CustomError", "Unable to save changes. Try again, and if the problem persists, see your system administrator. Error: " + s);
      }
      // rehydrate the view
      lvm.IsNew = true;
      //return Content("Thanks", "text/html");
      return PartialView("_CreateDialog", lvm);
  </code></pre>
  
  <p>It appears the partial view is loaded twice when there is an error: once in the result div and once from the original @using Html.BeginForm(). I verified this by putting a visible border around the result div.</p>
  
  <p>Any help is appreciated.</p>