使用部分視圖在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爲空。

我是否做了錯誤的事情導致文件不能與視圖模型一起傳遞？

Answer 1

您應該使用的基類（HttpPostedFileBase），即替換：

public HttpPostedFile ModelFile { get; set; } 

有：

public HttpPostedFileBase ModelFile { get; set; } 

在您的視圖模型。

---

這就是說，這只是你的問題的一半。您似乎正在使用AJAX請求提交表單：

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

您無法使用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，...