如何动态绑定列表<IFormFile> 属性

Question

我的问题与我之前的问题非常相似post:

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

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

我的 Razor Page 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);
});

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

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

Answer 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);
});

如何动态绑定列表<IFormFile> 属性

How to bind an List<IFormFile> property dynamically

.net

c#

jquery

asp.net-core

razor-pages