文件上传绑定到Viewmodel

Question

我有一个表单，其中我正在上传多个文件，并且与正在上传的每个文件相关联的是一些文本框和一些复选框。 我已经看到了上传多个文件的示例，其中actionresult签名如下：

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> fileUpload)

然而，我找不到任何示例，可以在我的actionresult签名为以下内容时上传多个文件：

[HttpPost]
public ActionResult Upload(MyViewModel vm)

我希望发布这个ViewModel是因为我认为它比使用FormCollection变量更干净，而且我想要上传的每个文件和添加的数据以及与其相关的文本框都通过List<FileUploadPacket>分组，这将成为ViewModel的一部分。

更新

我的ViewModel如下：

public class EmployeeVM  
{

    public int EmployeeID {get ;set;}
    public string EmpName {get ;set;}
    //Other properties

    public List<FileUploadPacket> FileUploadPackets { get; set; }
}

FileUploadPacket类具有类型为HttpPostedFileBase的属性。

public class FileUploadPacket 
{

    public int FileID {get ;set;}
    public string UserEnteredDesc {get ;set;}
    //some more other properties

    public HttpPostedFileBase UpFile { get; set; }
}

以下是我的view.aspx代码片段：

<%: Html.TextBoxFor(model => model.EmpName, new { maxLength = 50 })%>

Upload your files here: 
<input type="file" id="UpFile" name="UpFile" value="ActionHandlerForForm"  />
<%: Html.TextBoxFor(model => model.FileUploadPackets[0].UserEnteredDesc )%>

<input type="file" id="UpFile" name="UpFile" value="ActionHandlerForForm"  />
<%: Html.TextBoxFor(model => model.FileUploadPackets[1].UserEnteredDesc )%>

正如您所看到的，我将所有与正在上传的特定文件相关的其他属性都保留在它自己的类中。因此，在我的表单中，员工可以输入他的姓名并上传他的文件，并为每个文件提供一些描述和其他细节。如果我将公共HttpPostedFileBase UpFile { get; set; }属性移动到EmployeeVM类中，那么我将不得不分别收集所有文件并手动映射文件到其描述。有没有办法将UpFile属性保留在FileUploadPacket类中完成这一操作呢？

我正在使用aspx视图引擎。

请帮忙解答，感谢您的时间...

- user20358

Answer 1

GetHtml助手不是MVC框架的一部分，您应该寻找包含该助手的第三方库。

但是，上传作为ViewModel的一部分的文件非常简单。基本上可以这样做：

定义视图模型

public class MyViewModel 
{
     public HttpPostedFileBase MyFile { get; set; }
}

在 Views/Shared/EditorTemplates 中创建 MyViewModel.cshtml

<input type="file" id="MyFile" name="MyFile" />

对应于上传操作的视图

@model MyViewModel

@using(Html.BeginForm("Upload", "MyController", FormMethod.Post, new { enctype="multipart/form-data"})
{
     @Html.EditorForModel()
    <input type="submit" value="Upload" />
}

上传文件时，required 属性很重要。

提交表单后，在 [HttpPost] 操作中，应该可以看到已上传的文件在 vm.MyFile 中。

- archil

---

强调一下，对于我来说，enctype="multipart/form-data" 部分解决了这个问题。 - yu yang Jian

Answer 2

解决这个问题的方法是改变你命名和标识上传控件的方式。

<%: Html.TextBoxFor(model => model.EmpName, new { maxLength = 50 })%>

Upload your files here: 
<input type="file" id="FileUploadPackets[0].UpFile" name="FileUploadPackets[0].UpFile" value="ActionHandlerForForm"  />
<%: Html.TextBoxFor(model => model.FileUploadPackets[0].UserEnteredDesc )%>

<input type="file" id="FileUploadPackets[1].UpFile" name="FileUploadPackets[1].UpFile" value="ActionHandlerForForm"  />
<%: Html.TextBoxFor(model => model.FileUploadPackets[1].UserEnteredDesc )%>

这对我很有帮助！希望能帮到其他人..

- user20358

---

注意：对于VS2019/NET48，id语法已更改，不再使用<input type="file" id="FileUploadPackets[0].UpFile" name="FileUploadPackets[0].UpFile" value="ActionHandlerForForm" />，而是使用<input type="file" id="FileUploadPackets_0__UpFile" name="FileUploadPackets[0].UpFile" value="ActionHandlerForForm" />。 - Goodies