Blazor 将数据绑定到集合？答案

【问题标题】：Blazor bind data to collection?Blazor 将数据绑定到集合？
【发布时间】：2019-12-15 01:49:24
【问题描述】：

我正在尝试使用 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.

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

【问题讨论】：

是的，创建一个采用（绑定）formProperties 的组件。然后创建一个采用prop 的子组件。父组件foreach 通过集合，为每个prop 渲染一个子组件。然后子组件可以为 prop 的每个属性处理正确的<InputText> 字段的呈现并绑定它们。
<InputText> 字段将绑定到哪里？我怎样才能将这些数据提供给父母？
使用组件到组件的数据绑定。 Blazor 在名为Chained Bind 的组件之间提供双向数据绑定，通过事件回调和使用命名约定属性Changed，您可以通知父级更新。

标签： c# asp.net data-binding blazor

【解决方案1】：

在尝试基于属性字典构建表时遇到类似问题，我遇到了来自 Steve 的 this reply。

基本上你可以做的是引入一个新的类型，叫做 e.g.

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

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

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

这可以说比使用链式绑定创建新组件更简单。

【讨论】：

【解决方案2】：

很遗憾，目前您不能将<InputText/> 组件用于更复杂的访问器。

但是，如果您不介意处理自己的验证/通知代码，您可以自己滚动：

将<InputText/> 更改为<input/>
使用@bind 而不是@bind-Value

使用您的代码：

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

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

你也可以走@dennis1679 建议的路线，创建一个子组件。我很好奇Chained Binding 与顶级表单/模型验证的集成在实践中会是什么样子。我还没玩过。

仅供参考，我进行了快速搜索，并没有在 github 中看到问题（可能是一个功能），但是当我找到它时，我会更新它。

【讨论】：