title: Upload a file in a jQuery dialog with a partial view
body: <p>I have a page where you can edit a client. On this page, you can also upload files for a client. You click a button, a jQuery dialog opens, you upload a file, and click Save.</p>
  
  <p>Here's my /Clients/Edit view:</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
  
      $(document).ready(function () {
  
          // add file click event
          $("a#addFile").click(function () {
              $.ajax({
                  url: '@Url.Content("/ClientFiles/Create/")' + @Model.ClientId,
                  context: document.body,
                  success: function (data) {
                      // open dialog with Create partial view data
                      $("#dialog-add").html(data).dialog("open");
                  }
              });
  
              return false;
          });
  
  
          // add file dialog settings
          $("#dialog-add").dialog({
              modal: true,
              buttons: {
                  "Save": function () {
                      $.validator.unobtrusive.parse("#AddFileForm");
                      if ($("#AddFileForm").valid()) {
                          $.post("/ClientFiles/Create", $("#AddFileForm").serialize(),
                              function (data) {
                                  $("#dialog-add").dialog("close");   // close dialog
                              });
                      }
                  }
              }
          });
      });
  
  &lt;/script&gt;
  
  @using (Html.BeginForm("Edit", "Clients", FormMethod.Post))
  {
      @Html.HiddenFor(m =&gt; m.ClientId)            
  
      &lt;a id="addFile"&gt;Add a new file&lt;/a&gt;
      &lt;div id="dialog-add" title="" style="display:none"&gt;&lt;/div&gt;        
  
      &lt;input type="submit" value="Save" /&gt;            
  }
  </code></pre>
  
  <p>Here is my /ClientFiles/Create partial view:</p>
  
  <pre><code>@model Models.ClientFileViewModel
  
  @using (Html.BeginForm("Create", "ClientFiles", FormMethod.Post, new { @id = "AddFileForm", enctype = "multipart/form-data" }))
  {
      @Html.ValidationSummary(true)
  
      @Html.HiddenFor(model =&gt; model.ClientId)    
      @Html.TextBoxFor(model =&gt; model.ModelFile, new { type = "file" })
  
      @Html.ValidationSummary()
  }
  </code></pre>
  
  <p>Here's my ClientFileViewModel:</p>
  
  <pre><code>public class ClientFileViewModel
  {
      [ScaffoldColumn(false)]
      public int ClientFileId { get; set; }
  
      public int ClientId { get; set; }
      public HttpPostedFile ModelFile { get; set; }
  }
  </code></pre>
  
  <p>And finally, my ClientFilesController methods:</p>
  
  <pre><code>public ActionResult Create(int id)
  {
      return PartialView(new ClientFileViewModel { ClientId = id  } );
  }
  
  public JsonResult Create(ClientFileViewModel viewModel)
  {
      if (ModelState.IsValid)
      {
          if (viewModel.ModelFile != null)
          {
              // upload file here
          }
      }
  
      return Json(new { success = true });
  }
  </code></pre>
  
  <p>So everything works up until I post to <code>Create(ClientFileViewModel viewModel)</code>. When I go through the debugger, the view model contains <code>ClientId</code>, but <code>ModelFile</code> is null.</p>
  
  <p>Am I doing something wrong that is causing the file to not be passed with the view model?</p>