使用部分视图在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，...