在ASP.NET Core中上载带有参数的多个文件

时间:2019-02-16 14:24:13

标签: c# asp.net razor asp.net-core tag-helpers

我的视图模型:

public class FileInfo
{
    [Required]
    [StringLength(50, ErrorMessage = "TitleErrorMessage", MinimumLength = 2)]
    public string Title { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "DesErrorMessage", MinimumLength = 3)]
    public string Description { get; set; }

    [Required]
    [DataType(DataType.Upload)]
    public IFormFile File { get; set; }
}

以下是_UploadForm部分视图文件:

@model SessionStateTest.Models.FileInfo

<div class="form-group">
    <label>Title</label>
    <input class="form-control" asp-for="Title" />
</div>
<div class="form-group">
    <label>Description</label>
    <input class="form-control" asp-for="Description" />
</div>
<div class="form-group">
    <label></label>
    <input type="file" asp-for="File" />
</div>

在另一个具有以下代码的视图中使用:

<form asp-action="AddUploadForm" asp-controller="Home" method="Post">
    <input type="submit" value="Add another file" class="btn btn-sm btn-primary" />
</form>
<form asp-action="Upload" asp-controller="Home" method="Post" enctype="multipart/form-data">

    @foreach (var item in Model.Upload)
    {
        @(await Html.PartialAsync("_UploadForm", item))
    }

    <div class="col-xs-12">
        <input type="submit" value="Upload" class="btn btn-sm btn-info" />
    </div>
</form>

基本上,AddUploadForm操作将FileInfo类型的新视图模型添加到Model.Upload中,这是我的主要视图模型。 问题在于,以下List<FileInfo> vm操作中的列表Upload完全为空:

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Upload(List<FileInfo> vm)
{
    .... some other logic 
    return View();
}

我不想使用multiple属性,因为我想强迫用户为每个文件提供标题和描述。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您使用_UploadForm的方法会生成以下html(仅关注input,因为这是最重要的部分)

<input class="form-control" name="Title" />
<input class="form-control" name="Description" />
<input type="file" name="File" />

...
<input class="form-control" name="Title" />
<input class="form-control" name="Description" />
<input type="file" name="File" />

... and so on

因此,name属性仅包含FileInfo模型的属性名称而没有索引,这仅适用于控制器希望使用单个模型的情况

public IActionResult Upload(FileInfo vm)

并且为了使您的html与具有模型列表的当前控制器一起使用

public IActionResult Upload(List<FileInfo> vm)

应该看起来像这样

<!-- version 1 -->
<input class="form-control" name="[0].Title" />
<input class="form-control" name="[0].Description" />
<input type="file" name="[0].File" />

...
<input class="form-control" name="[1].Title" />
<input class="form-control" name="[1].Description" />
<input type="file" name="[1].File" />

... and so on

<!-- version 2 -->
<!-- the name before index must match parameter name in controller -->
<input class="form-control" name="vm[0].Title" />
<input class="form-control" name="vm[0].Description" />
<input type="file" name="vm[0].File" />

...
<input class="form-control" name="[1].Title" />
<input class="form-control" name="[1].Description" />
<input type="file" name="vm[1].File" />

... and so on

这可以通过使用标签帮助器和部分视图来完成,方法略有不同。您所需要做的就是将局部视图的模型转换为列出和更新asp-for表达式。

_UploadForm.cshtml

@model List<SessionStateTest.Models.FileInfo>

@for (int i = 0; i < Model.Count; i++)
{
    <div class="form-group">
        <label>Title</label>
        <input class="form-control" asp-for="@Model[i].Title" />
    </div>
    <div class="form-group">
        <label>Description</label>
        <input class="form-control" asp-for="@Model[i].Description" />
    </div>
    <div class="form-group">
        <label></label>
        <input type="file" asp-for="@Model[i].File" />
    </div>
}

查看

<form asp-action="Upload" asp-controller="Home" method="Post" enctype="multipart/form-data">

    @await Html.PartialAsync("_UploadForm", Model.Upload)

    <div class="col-xs-12">
        <input type="submit" value="Upload" class="btn btn-sm btn-info" />
    </div>
</form>

它将像版本1 中那样生成html。