ファイルをjQueryダイアログの部分ビューでアップロードする

Question

クライアントを編集できるページがあります。このページでは、クライアントのファイルをアップロードすることもできます。ボタンをクリックすると、jQueryダイアログが開き、ファイルをアップロードし、[保存]をクリックします。ここで

は私/クライアント/編集ビューです：ここで

<script type="text/javascript" language="javascript"> 

    $(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 
          }); 
        } 
       } 
      } 
     }); 
    }); 

</script> 

@using (Html.BeginForm("Edit", "Clients", FormMethod.Post)) 
{ 
    @Html.HiddenFor(m => m.ClientId)    

    <a id="addFile">Add a new file</a> 
    <div id="dialog-add" title="" style="display:none"></div>   

    <input type="submit" value="Save" />    
} 

は、部分的なビューを作成します/私/ ClientFilesです：

@model Models.ClientFileViewModel 

@using (Html.BeginForm("Create", "ClientFiles", FormMethod.Post, new { @id = "AddFileForm", enctype = "multipart/form-data" })) 
{ 
    @Html.ValidationSummary(true) 

    @Html.HiddenFor(model => model.ClientId)  
    @Html.TextBoxFor(model => model.ModelFile, new { type = "file" }) 

    @Html.ValidationSummary() 
} 

ここに私のClientFileViewModelです：

public class ClientFileViewModel 
{ 
    [ScaffoldColumn(false)] 
    public int ClientFileId { get; set; } 

    public int ClientId { get; set; } 
    public HttpPostedFile ModelFile { get; set; } 
} 

そして最後に、私のClientFilesControllerメソッド：

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 }); 
} 

Create(ClientFileViewModel viewModel)に投稿するまですべてが機能します。デバッガを通過すると、ビューモデルにはClientIdが含まれますが、ModelFileはnullです。

ビューモデルでファイルが渡されない原因となっている何かが間違っていますか？

Answer 1

あなたはすなわち置き換え、ベースクラス（HttpPostedFileBase）を使用してください：

public HttpPostedFile ModelFile { get; set; } 

で：

public HttpPostedFileBase ModelFile { get; set; } 

あなたのビューモデルに。

---

これはあなたの問題の半分に過ぎないと言われています。

$.post("/ClientFiles/Create", $("#AddFileForm").serialize(), 

あなたがサーバーにファイルをアップロードするためにAJAXを使用することはできません：あなたはフォームを送信するためにAJAX要求を使用しているように見えます。 file input fieldsをサポートするjquery.formなどのプラグインを使用して、この制限を回避するために非表示のiframeを生成することができます。あなたはあなたができるプラグインを使用することにしたのであれば、それをAJAXifyするには、次ファイルをアップロードすることができ

"Save": function() { 
    $.validator.unobtrusive.parse("#AddFileForm"); 
    if ($("#AddFileForm").valid()) { 
     $("#AddFileForm").ajaxSubmit(function() { 
      $("#dialog-add").dialog("close"); 
     }); 
    } 
} 

その他の人気のプラグインがないUploadify、Blueimp File Upload、Ajax Upload、...