title: Posting partial view form from Jquery dialog using MVC
body: <p>I'm working on a web page using MVC with C#. I have opened a Jquery dialog on the page and within that dialog I load a partial view. The view contains a form with file to upload and then the Jquery dialog has a submit button. </p>
  
  <p>I first tried using a regular cshtml begin form and submit as so</p>
  
  <pre><code>@using (Html.BeginForm("UploadOutShipment", "Shipment", FormMethod.Post, new { enctype = "multipart/form-data", id = "form"}))
  {
  @Html.TextBoxFor(m =&gt; m.file, new { type = "file", name = "file", @class = "required" })
  &lt;input type="submit" name="submit"/&gt;
  }
  </code></pre>
  
  <p>Then when I pressed the submit button that was inside the dialog box it did nothing. So then looking on StackOverFlow I found other people with similar problems and looked at,
  <a href="https://stackoverflow.com/questions/6443337/jquery-mvc3-submitting-a-partial-view-form-within-a-modal-dialog">jQuery, MVC3: Submitting a partial view form within a modal dialog</a>. After looking at this I changed my Jquery dialog box to have a submit function like so.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function uploadPopUp() {
      $('#uploadCSVD').dialog({
          autoOpen: true,
          width: 600,
          title: 'Upload CSV',
          resizable: false,
          modal: true,
          open: function (event, ui) {
              $(this).load('@Url.Action("UploadOutShipment", "Shipment")');
          },
          buttons: {
              "Submit": function () {
                  $.ajax(
                       {
                           url: 'UploadOutShipment',
                           type: "POST",
                           async: true,
                           data: $('form', $(this)).serialize()
                       });
              }
          },
          close : function(event, ui){
              location.reload(true);
          }
      });
  }&lt;/script&gt;
  </code></pre>
  
  <p>Here are my actions in the controller</p>
  
  <pre><code>    [HttpGet]
      public ActionResult UploadOutShipment(UploadOutShipment model)
      {
          return PartialView(model);
      }
  
      [HttpPost]
      [ActionName("UploadOutShipment")]
      public ActionResult UploadOutShipmentPost(UploadOutShipment model)
      {
          //Do stuff with data
          return View(model);
      }
  </code></pre>
  
  <p>The above ajax succeeded in calling the post method "UploadShipmentOut", but the problem is the model did not contain the data from my form. I'm very new to MVC and Jquery/Javascript/Ajax so could someone explain how if I'm going around this the right way? If I am, how can I get the form 'data' from the Ajax call into my controller? When I have done this with the dialog box the data usually binded to the model by ID.</p>