title: Asp.NET MVC 5 Ajax Form Post
body: <p>I use Popups on my MVC 5 Page quite often. When a user clicks a button I perform an Ajax Post and append the document with the loaded HTML</p>
  
  <p>Sample:</p>
  
  <pre><code>$.ajax({
              url: _editTimeRecordDialog,
              data: data,
  
              beforeSend: function () {
                  $("#loading-overlay").show();
              },
              success: function (data2) {
                  $("#loading-overlay").hide();
  
                  $("body").append(data2);
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert(thrownError + 'xhr error -- ' + xhr.status);
                  $("#loading-overlay").hide();
              }
          });
  </code></pre>
  
  <p>Now I want to know if this pattern works with forms. To be more specific I want to reuse the forms which are generated from VisualStudio Template (MVC 5 Controller with views, using Entity Framework).</p>
  
  <p>I guess it would work when I just do an Ajax post on some button click with the the form element but what about the validation?</p>
  
  <p>When the post was successfull and the entity was created I just want to remove the popup again.</p>
  
  <p>Right now I do this that way:</p>
  
  <pre><code>  $.ajax({
          url: _createOrUpdateTimeRecord,
          data: JSON.stringify(data),
          type: "POST",
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          beforeSend: function () {
              $("#loading-overlay").show();
          },
          success: function (data2) {
              refreshCalendar();
  
              $("#loading-overlay").hide();
              $("#create-time-record-overlay").remove();
          },
          error: function (xhr, ajaxOptions, thrownError) {
              alert(thrownError + 'xhr error -- ' + xhr.status);
              $("#loading-overlay").hide();
          }
      });
  </code></pre>