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

Question

我正在尝试在BlazorInputFile组件中数据绑定一些用户选择的文件，特别是每个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列表应用教程的扩展。

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属性，如下所示：

[参数]public EventCallback OnChange｛get；set；｝

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

<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替换为，然后再次结账