How to bind an List<IFormFile> property dynamically

问题

My issue is very similar to my previous post:

How to bind a property to a dynamic list of objects

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:

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.

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

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>

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

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.

If there is anything that is not understood please let me know and I will try clarifying.

回答1:

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>

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

来源：https://stackoverflow.com/questions/55498695/how-to-bind-an-listiformfile-property-dynamically