title: How to make a .NET MVC Form inside a Modal using jQuery with validation
body: <p>I am really struggling with knowing how to put this all together.  I've built forms inside .net MVC pages plenty of times, with and without validation.  And I've built forms using jQuery, with and without validation.  And I've built forms inside of a modal, but never with MVC.</p>
  
  <p>I understand from my <a href="https://stackoverflow.com/questions/31039001/asp-net-mvc-need-help-putting-a-form-inside-a-bootstrap-modal?noredirect=1#comment50102744_31039001">original question</a> that because this form is inside a modal that I'll need to use jQuery to handle the submit. I am having a heck of a time figuring out how to put all these moving pieces together.  So far, I've not found a tutorial (or combo of tutorials) that puts this all together.</p>
  
  <p>Here is what I need:</p>
  
  <ul>
  <li>Inside of my MVC view there is a button that opens a modal.  <em>(This works fine.)</em></li>
  <li>Once the modal opens, it contains a form with several text fields and dropdowns.  Each is required.  <em>(To make the fields required, would I define these in the view's model, as I normally would with an MVC form?  Or do I create the requirements in the jQuery?)</em></li>
  <li>If the user attempts to submit the form and they are empty or invalid, the modal stays open and the validation messages appear.  <em>(I understand, from my <a href="https://stackoverflow.com/questions/31039001/asp-net-mvc-need-help-putting-a-form-inside-a-bootstrap-modal?noredirect=1#comment50102744_31039001">original question</a>, that this is not possible using straight MVC because of the modal, and that some jQuery is needed.  I'm lost here.)</em></li>
  <li>If the user attempts to submit the form and all fields are valid, then the modal closes, we hit the controller and save the fields to the db.  <em>(Not sure how to escape out of the jQuery and just hit the normal controller to handle the final logic.)</em></li>
  </ul>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Thank you, Jason, for your help!  Based on your suggestions, this is how I got it working.</p>
  
  <p><strong>The Parent View:</strong></p>
  
  <p>The modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="AccountEditModal" tabindex="-1" role="dialog" aria-labelledby="AccountEditModalLabel"&gt;
      &lt;div class="modal-dialog modalAccountEdit" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;h3&gt;&lt;strong&gt;Edit Account Profile - &lt;span class="accountname"&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                  &lt;div id="formContent"&gt;
                      @Html.Partial("_AccountProfileEdit", new GEDCPatientPortal.Models.AccountProfileEditViewModel())
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then here's the scripts:</p>
  
  <pre><code>@section Scripts {
      &lt;script&gt;
          $(document).ready(function () {
  
              $('#AccountEditModal').on('shown.bs.modal', function () {
                  $('#myInput').focus()
              })
  
  
  
          $("#AccountEditModal").on("submit", "#form-accountprofileedit", function (e) {
              e.preventDefault();  // prevent standard form submission
  
              var form = $(this);
              $.ajax({
                  url: form.attr("action"),
                  method: form.attr("method"),  // post
                  data: form.serialize(),
                  success: function (partialResult) {
                      $("#formContent").html(partialResult);
                  }
              });
          });
  
  
          });
  
      &lt;/script&gt;
  }
  </code></pre>
  
  <p><strong>The Partial View (slimmed down):</strong></p>
  
  <pre><code>@using (Html.BeginForm("AccountProfileEdit", "Account", FormMethod.Post, new { id = "form-accountprofileedit", @class = "full-form" }))
      {
  
  
      @Html.CustomTextboxFor(model =&gt; model.Address)
  
  
      &lt;div style="text-align:right;"&gt;
          &lt;button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;"&gt;Edit Account&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p><strong>The Controller:</strong></p>
  
  <pre><code>    [HttpPost]
      public ActionResult AccountProfileEdit(AccountProfileEditViewModel model)
      {
          if (ModelState.IsValid)
          {
              // logic to store form data in DB
          }
  
          return PartialView("_AccountProfileEdit", model);
  
      }
  </code></pre>