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

本文介绍了如何绑定List< IFormFile>动态属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的问题与我以前的帖子非常相似:

My issue is very similar to my previous post:

如何将属性绑定到动态对象列表

但是，我试图通过更复杂的控件(输入文件选择器)来完成解决上一个问题的相同操作.因此，我的问题非常相似，但是在这种情况下，由于先前的解决方案无法正常工作，因此我猜测修复方法会稍有不同.无论如何，

However I am trying to do the same thing that solved this problem in my previous post with a more complex control, an input file selector. Due to this, my question is very similar, however in this case I am guessing the fix is slightly different since the previous solution did not work. Anyhow here goes:

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

I am using the core 2.2 framework and am having trouble finding out how I can bind a list of IFormFile to a razor page. On the razor page I have a button to add a new file input to the screen. This button executes a jquery click event that alters the html to add a new input button of type file without refreshing the page. What I am looking to do with this, is that when I add a new button it binds the selected file to the List object. I can then process this list of items when I post the form.

我的剃刀页面" cs看起来像这样:

My Razor Page cs looks something like this:

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 Page cshtml看起来像这样:

The Razor Page cshtml looks something like this:

... <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代码:

and finally here is my jquery code:

$("#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中的值.

Finally, when I post the form that contains this code, I want to be able to access the values input into the dynamically created html from my binded property.

如果有任何无法理解的内容，请告诉我，我会尽力澄清.

推荐答案

因此，显然，当您使用输入文件时，似乎没有像在正常情况下那样使用[i]部分.下面是更改的代码:

So Apparently when you work with input files it appears that you don't use the [i] part as in normal cases. Below is the code that changed:

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