如何使用 RenderTreeBuilder 在 blazor 中创建双向绑定？答案

【问题标题】：How to create a two-way binding in blazor using the RenderTreeBuilder?如何使用 RenderTreeBuilder 在 blazor 中创建双向绑定？
【发布时间】：2022-07-20 18:52:15
【问题描述】：

我想知道如何使用RenderTreeBuilder 在 blazor 中实现双向绑定。因此，我创建了以下简约示例来讨论解决方案

<MudForm @ref="@_Form" @bind-IsValid="@IsValid">@ChildContent</MudForm>

@code {
    [Parameter]
    public bool IsValid { get; set; }

    [Parameter]
    public EventCallback<bool> IsValidChanged { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private MudForm _Form;
}

我想使用 RenderTreeBuilder 重新实现有关 MudForm 的 blazor 代码。我想实现bind-IsValid-attribute 时遇到困难。我不知道如何实现这种双向绑定。到目前为止，我的实现如下所示

    private RenderFragment formControl => (builder) =>
    {
        builder.OpenComponent<MudForm>(0);
        builder.AddAttribute(1, nameof(MudForm.IsValid), IsValid);
        builder.AddAttribute(2, nameof(MudForm.IsValidChanged), EventCallback.Factory.CreateBinder(this, value => IsValid = value, IsValid));
        builder.AddAttribute(3, nameof(MudForm.ChildContent), ChildContent);
        builder.AddComponentReferenceCapture(4, (value) => { _Form = (MudForm)value; });
        builder.CloseComponent();
    };

EventCallback.Factory 的使用是否正确？有没有人知道如何使用RenderTreeBuilder 实现对属性的这种双向绑定？

【问题讨论】：

查看 razor 文件的生成源并复制它。
您可以查看this link，也许对您有帮助。
@MisterMagoo 谢谢这对我有帮助！！

标签： asp.net-core binding blazor .net-6.0 mudblazor

【解决方案1】：

我通过检查生成的文件找到了解决方案。这是我所做的：

我在相应项目的.csproj-文件中添加了以下属性。

<PropertyGroup>
  <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
</PropertyGroup>

转到生成的文件（例如/obj/Debug/net6.0/generated/....）
转到以.g.cs结尾的对应文件，查看RenderTreeBuilder的生成代码。

以下代码由 razor 编译器生成

builder.AddAttribute(2, nameof(MudForm.IsValidChanged), EventCallback.Factory.Create<bool>(this, value => { IsValid = value; }));

【讨论】：