Question

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

How to bind a property to a dynamic list of objects

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

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

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

    this.register(data).then(success => {
            if (!success) {
                Object.keys(this.requestErrorMessage).forEach(key => {
                    if (this.errorFields.includes(key)) {
                        this.errorValues[key] = this[key]
                    }
                })
                this.$v.$reset()
                this.$v.$touch()
            }
        })

Razor Page cshtml看起来像这样：

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

最后是我的jquery代码：

...
<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>

最后，当我发布包含此代码的表单时，我希望能够从绑定属性访问输入到动态创建的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);
});

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

1 个答案: