如何动态绑定 List<IFormFile> 属性答案

【问题标题】：How to bind an List<IFormFile> property dynamically如何动态绑定 List<IFormFile> 属性
【发布时间】：2019-08-25 04:35:52
【问题描述】：

我的问题和我之前的帖子很相似：

How to bind a property to a dynamic list of objects

但是，我正在尝试使用更复杂的控件（输入文件选择器）来解决我上一篇文章中的此问题。因此，我的问题非常相似，但是在这种情况下，我猜测修复会略有不同，因为之前的解决方案不起作用。无论如何这里：

我正在使用 .net core 2.2 框架，但无法找出如何将 IFormFile 列表绑定到剃须刀页面。在剃须刀页面上，我有一个按钮可以将新文件输入添加到屏幕。此按钮执行一个 jquery 单击事件，该事件会更改 html 以添加一个新的文件类型的输入按钮，而无需刷新页面。我想要做的是，当我添加一个新按钮时，它将选定的文件绑定到 List 对象。然后，我可以在发布表单时处理此项目列表。

我的 Razor 页面 cs 看起来像这样：

public class CreateModel : PageModel
{
    #region Variables

    private readonly MyContext _myContext;

    #endregion

    #region Properties

    [BindProperty]
    public List<IFormFile> Files { get; set; }

    #endregion

    public CreateModel(MyContext myContext)
    {
        _myContext = myContext;            
    }

    public async Task<IActionResult> OnGetAsync()
    {
        #region Create instance of a FormFile for testing purposes

        FormFile file;
        using (var stream = System.IO.File.OpenRead("/test.txt"))
        {
            file = new FormFile(stream, 0, stream.Length, stream.Name, Path.GetFileName(stream.Name))
            {
                Headers = new HeaderDictionary(),
                ContentType = "text/css",
            };
        }

        Files.Add(file);

        #endregion

        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        return Page();
    }
}

Razor 页面 cshtml 看起来像这样：

...
<div id="file-container">
    @for (var i = 0; i < Model.Files.Count(); i++)
    {
        <div class="myfile">
            <label class="control-label">Upload file</label>
            <input asp-for="Files[i]" type="file" />
        </div>
    }
</div>

<div class="item-add">
    <a id="add-file" class="link-button"><img class="add-file" src="@Url.Content("~/images/ic_add.png")" />Add File</a>
</div>

最后是我的 jquery 代码：

$("#add-file").click(function () {
    var nextId = $(".file").length;

    var rowHtml = '<div class="file">' +
        '<label class="control-label">Upload file</label>' +
        '<input id="Files_' + nextId + '_" name="Files[' + nextId + ']" type="file" />' +
        '</div>';

    $("#file-container").append(rowHtml);
});

最后，当我发布包含此代码的表单时，我希望能够从我的绑定属性访问输入到动态创建的 html 中的值。

如果有什么不明白的地方请告诉我，我会尽力澄清。

【问题讨论】：

标签： c# jquery .net asp.net-core razor-pages

【解决方案1】：

所以显然，当您使用输入文件时，您似乎不像在正常情况下那样使用 [i] 部分。以下是更改的代码：

<div id="file-container">
    @for (var i = 0; i < Model.Files.Count(); i++)
    {
        <div class="myfile">
            <label class="control-label">Upload file</label>
            <input asp-for="Files" type="file" />
        </div>
    }
</div>

在 jquery 中：

$("#add-file").click(function () {
    var nextId = $(".file").length;

    var rowHtml = '<div class="file">' +
        '<label class="control-label">Upload file</label>' +
        '<input id="Files" name="Files" type="file" />' +
        '</div>';

    $("#file-container").append(rowHtml);
});

【讨论】：