如何在 Blazor 中绑定数据到集合？

Question

我想通过Blazor编程方式生成表单，但是我遇到了一个问题，需要将InputText的值绑定到集合成员中，例如：

@foreach (var prop in formProperties)
{
    <InputText id=@prop.Name @bind-Value="form.Responses[prop.Name]" />
}

然而，我遇到了以下异常：

System.ArgumentException: The provided expression contains a InstanceMethodCallExpression1 which is not supported. FieldIdentifier only supports simple member accessors (fields, properties) of an object.

是否可以将输入绑定到某种集合？

- Adam

---

是的，创建一个组件来接收（绑定）formProperties。然后创建一个子组件来接收prop。父组件通过循环遍历集合并为每个prop渲染一个子组件。子组件可以处理每个属性的prop的正确<InputText>字段的呈现和绑定。 - Dennis VW

<InputText>字段会绑定到哪里？我如何将该数据传递给父组件？ - Adam

使用组件到组件数据绑定。Blazor提供了两个组件之间的双向数据绑定，称为Chained Bind。通过事件回调和使用命名约定属性Changed，您可以通知父级进行更新。 - Dennis VW

Answer 1

遇到了一个类似的问题，我试图根据属性字典构建一个表格，我看到了Steve的回复这个回复。

基本上你可以做的是引入一个新的类型，比如。

public class FormResponse
{
    public string Value { get; set; }
}

假设您现在在您的表单对象上创建了一个FormResponse的字典，您可以这样做：

@foreach (var prop in formProperties)
{
    <InputText id="@prop.Name" @bind-Value="form.Responses[prop.Name].Value" />
}

相比使用Chained Binding创建新组件，这种方法可能更加直接简单。

- Sipke Schoorstra

Answer 2

很遗憾，目前无法使用<InputText/>组件处理更复杂的访问器。

但是，如果您不介意自己处理验证/通知代码，可以通过以下方式构建自己的组件：

• 将<InputText/>更改为<input/>
• 使用@bind代替@bind-Value

使用您的代码：

@foreach (var prop in formProperties)
{
    <input id=@prop.Name @bind="form.Responses[prop.Name]" />
}

再次强调，您将失去更改通知、验证以及与EditForm和EditContext的所有连接。

您还可以选择@dennis1679建议的方法，创建一个子组件。我很好奇在实践中使用链接绑定和顶级表单/模型验证的整合会是什么样子。我还没有尝试过。

请注意，我进行了快速搜索，在github上没有看到这个问题（可能是一个功能），但找到后我会更新这个问题。

- Joshua Ball