将 ViewModel 与包括 HttpPostedFileBase 在内的 ViewModel 列表绑定到控制器操作答案

【问题标题】：Binding ViewModel with a list of ViewModels including HttpPostedFileBase to controller action将 ViewModel 与包括 HttpPostedFileBase 在内的 ViewModel 列表绑定到控制器操作
【发布时间】：2015-08-28 06:41:15
【问题描述】：

好的，所以我会尽力解释我目前面临的问题。

我想要一个创建视图，它被强类型化到 ViewModel。 ViewModel 有一些属性，其中一个是列表，其中包含另一种 ViewModel。该 ViewModel 包含更多属性，以及 HttpPostedFileBase 类型的值。

createView 应该在列表中包含每个 viewModel 的文件输入。所有其他属性将对用户隐藏。唯一需要用户交互的是 HttpPostedFileBase。

问题是，首先，我无法让 EditorFor 创建文件输入，相信我，我试过了。其次，我需要对强类型视图模型（下面的TestViewModel）列表中的每个条目都执行此操作，这样它就可以在发布时将值绑定回控制器。

我创建这个作为测试项目的原因是我需要查看 HTML 的外观，以便 asp.net 绑定器能够将其绑定到控制器发布操作。

如果您不理解上述问题，请随时提出问题。我会尽力回答。谢谢！

简化的示例类。

public class TestViewModel
{
    public string SomeString { get; set; }
    public int SomeInt { get; set; }
    public List<ImageViewModel> ImageViewModels { get; set; }
}

public class ImageViewModel
{
    [DataType(DataType.Upload)]
    public HttpPostedFileBase Value { get; set; }
}

创建视图（简化，我知道。这是一个测试项目）

@model WebApplication1.Models.TestViewModel

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>TestViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div>
            <table>
                <tr>
                    <th>Image</th>
                </tr>
                @for (int i = 0; i < Model.ImageViewModels.Count; i++)
                {
                    <td>@Html.EditorFor(m => m.ImageViewModels[i].Value)</td>
                }
            </table>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

【问题讨论】：

除非您创建了自定义EditorTemplate，否则您将需要使用@Html.TextBoxFor(m => m.ImageViewModels[i].Value, new { type = "file" })
@StephenMuecke 我只是简单地尝试了一下，似乎是一个积极的结果。今天晚些时候我会更深入地研究它。您能否将您的评论添加为答案，以便我给您信用？

标签： c# asp.net asp.net-mvc asp.net-mvc-3 mvvm

【解决方案1】：

EditorFor() 方法将为HttpPostedFileBase 的每个属性生成一个输入，而不是<input type="file" .../>。 EditorFor()方法使用TemplateHelpers来判断使用哪个模板生成html，可惜没有对应[DataType(DataType.Upload)]的模板

您可以使用以下内容来创建输入

@Html.TextBoxFor(m => m.ImageViewModels[i].Value, new { type = "file" })

或者为 typeof HttpPostedFileBase 创建一个 EditorTemplate，以便您可以使用 EditorFor() 方法

在/Views/Shared/EditorTemplates/HttpPostedFileBase.cshtml

@model HttpPostedFileBase
@Html.TextBoxFor(m => m, new { type = "file" })

【讨论】：

简短、准确但彻底的答案。谢谢！