如何绑定List< IFormFile>动态属性 [英] How to bind an List<IFormFile> property dynamically
问题描述
我的问题与我以前的帖子非常相似:
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:
我使用的是.net core 2.2框架，无法确定如何将IFormFile列表绑定到剃须刀页面.在剃须刀页面上，我有一个按钮可将新文件输入添加到屏幕上.此按钮执行一个jquery click事件，该事件会更改html以添加类型为file的新输入按钮，而无需刷新页面.我要做的是，当我添加一个新按钮时，它将所选文件绑定到List对象.然后，我可以在发布表单时处理此项目列表.
I am using the .net 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);
});
这篇关于如何绑定List< IFormFile>动态属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
