Как динамически связать свойство List <IFormFile> - PullRequest
Новая
       9

Как динамически связать свойство List <IFormFile>

0 голосов
/ 03 апреля 2019

Моя проблема очень похожа на мой предыдущий пост:

Как связать свойство с динамическим списком объектов

Однако я пытаюсь сделать то же самоеТо, что решило эту проблему в моем предыдущем посте с более сложным управлением, селектором входного файла.Из-за этого мой вопрос очень похож, но в этом случае я предполагаю, что исправление немного отличается, так как предыдущее решение не сработало.Как бы то ни было, здесь:

Я использую .net core 2.2 framework и не могу понять, как связать список IFormFile со страницей бритвы.На странице бритвы у меня есть кнопка, чтобы добавить новый файл ввода на экране.Эта кнопка выполняет событие jquery click, которое изменяет html, чтобы добавить новую кнопку ввода типа file без обновления страницы.Что я хочу сделать с этим, так это то, что когда я добавляю новую кнопку, она связывает выбранный файл с объектом List.Затем я могу обработать этот список элементов при публикации формы.

Моя страница 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();
    }
}

Cshtml Razor Page выглядит примерно так: 

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

Наконец, когда я публикую форму, содержащую этот код, я хочу получить доступ к значениям, вводимым в динамически создаваемый HTMLиз моей привязанной собственности.

Если есть что-то, что не понято, пожалуйста, дайте мне знать, и я постараюсь уточнить.

1 Ответ

0 голосов
/ 03 апреля 2019

Так что, очевидно, когда вы работаете с входными файлами, кажется, что вы не используете часть [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);
});
...