在 Blazor 中绑定使用 InputFile 选择的文件

Question

我正在尝试对 Blazor InputFile 组件中的一些用户选择的文件进行数据绑定，特别是每个 ToDoItem 的 AssociatedFiles 属性。这不起作用，因为AssociatedFiles 始终是null。

这是我的剃须刀组件：

@page "/todo"

@using BlazorPlayground.Data

<h3>Todo List</h3>
Total items: @todos.Count()
<br />
Done: @todos.Count(x => x.IsDone) out of @todos.Count()
<br />
Not Done: @todos.Count(x => !x.IsDone) out of @todos.Count()
<br />

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
            <input type="datetime-local" @bind="todo.DateAdded" />
            <InputFile OnChange="@OnFileSelected" @bind-value="todo.AssociatedFiles" multiple  />
        </li>
    }
</ul>


<input placeholder="Write something to do..." @bind="newTodo" />
<button @onclick="AddTodo">Add Todo Item</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!String.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem(newTodo));
            newTodo = "";
        }
    }

    private void OnFileSelected(InputFileChangeEventArgs e)
    {
    }
}

这是我的ToDoItem 班级：

namespace BlazorPlayground.Data
{
    public class TodoItem
    {
        public string Title { get; set; }
        public bool IsDone { get; set; }
        public DateTime DateAdded { get; set; }
        public IReadOnlyList<IBrowserFile> AssociatedFiles {get; set;}

        public TodoItem(string title)
        {
            this.Title = title;
            this.IsDone = false;
            this.DateAdded = DateTime.Now;
        }
    }
}

顺便说一句，您可能已经注意到这是Blazor todo list app tutorial 的扩展。

Answer 1

以前从未这样做过，但我想这应该可行......

<InputFile OnChange="@((InputFileChangeEventArgs args) => OnFileSelected(args, todo))" multiple  />

获取选定的文件，并将它们添加到AssociatedFiles 字段 当前的TodoItem 对象

private void OnFileSelected (InputFileChangeEventArgs e, TodoItem todo)
{
    var selectedFiles = e.GetMultipleFiles();
    todo.AssociatedFiles = selectedFiles;
    this.StateHasChanged();
}

更新

我是 Web 开发的新手，我不知道您可以将匿名函数传递给那里的 OnChange 属性。

这是一个 lambda 表达式...

我以为你应该在那里输入方法的名称。

InputFile 组件公开一个 EventCallback 属性，如下所示：

[参数] 公共事件回调 OnChange { 获取；放; }

通常您将事件处理程序的名称分配给属性属性，如下所示：

<InputFile OnChange="OnInputFileChange" multiple />

并像这样使用它：

private void OnInputFileChange (InputFileChangeEventArgs e)
{
     selectedFiles = e.GetMultipleFiles();
     message = $"{selectedFiles.Count} file(s) selected";
     this.StateHasChanged();
}

您可以使用 lambda 表达式作为 OnChange 属性的值，如下所示...但在这种情况下，您有责任将 InputFileChangeEventArgs 参数传递给您的事件处理程序 (OnInputFileChange)

<InputFile OnChange="@((InputFileChangeEventArgs args) => 
                                   OnInputFileChange(args))" multiple  />

这当然是过时了，真的是多余的。但是，如果您想将第二个参数传递给您的事件处理程序，就像您的问题一样，这种方法是正确的。

Answer 2

我认为您的问题与 foreach 有关。因为当你使用 foreach 时它添加了额外的前缀，这可能是你的模型无法绑定的问题

所以我建议您将 foreach 替换为 for 并再次结帐