Blazor 模板内的两种方式数据绑定答案

【问题标题】：Two way data-binding inside blazor templateBlazor 模板内的两种方式数据绑定
【发布时间】：2020-08-11 00:56:24
【问题描述】：

我想在模板内的组件与其父组件之间使用双向数据绑定。数据绑定运行良好的一种方式。但是当我修改从 RenderFragment 传递的上下文时，这个修改不会传播到模板（容器）。这是示例。

这是模板定义。我们有一个表单，我们希望能够在模型的函数中指定表单的内容。

@typeparam TItem
@typeparam TItemDtoCU
@typeparam TDataService

<EditForm Model="@Item" OnValidSubmit="HandleValidSubmit" class="item-editor">
    <DataAnnotationsValidator />

    @FormContentTemplate(Item)

    <span class="save">
        <MatButton Type="submit" Raised="true">Save</MatButton>
        <MatButton Type="reset" Raised="true" OnClick="HandleCancelSubmit">Cancel</MatButton>
    </span>
</EditForm>

这里是我使用这个模板的地方

        <ModelEditorTemplate TItem="ClassName"
                             TItemDtoCU="OtherClassName"
                             TDataService="ServiceClassName"
                             ItemId="SelectedItem?.Id"
                             OnItemAdded="ItemAdded"
                             OnItemUpdated="ItemUpdated">

            <FormContentTemplate>
                <span>

                    <MatTextField Label="Name" @bind-Value="context.Name" @bind-Value:event="onchange" />
                    <ValidationMessage For="@(() => context.Name)" />
                </span>
            </FormContentTemplate>
        </ModelEditorTemplate>

当用户修改时，MatTextField字段被重置为模板组件提供的初始值。

你有什么想法吗？

编辑 1：关于我们获取数据方式的更多信息

是的，TDataService 正在从 REST Api 获取组件。这里链接到模板的部分类：

    public partial class ModelEditorTemplate<TItem, TItemDtoCU, TDataService> : ParentThatInheritsFromComponentBase
        where TItem : BaseEntity, new()
        where TDataService : ICrudService<TItem, TItemDtoCU>
    {
        public TItem Item = new TItem();
        [Inject]
        protected TDataService DataService { get; set; }

        protected override async Task OnParametersSetAsync()
        {
             //...
             await LoadItem();
             // ...
        }

        protected async Task LoadItem()
        {
            //...
            Item = await DataService.Get(ItemId.Value);
            // ....
        }
}

【问题讨论】：

如果你删除 @bind-Value:event="onchange" 有帮助吗？
不，一开始它不存在。我试图添加它来解决问题^^
ModelEditorTemplate 如何检索数据？与提供的 TDataService 有关吗？您能告诉我们 MET 组件是如何查询该服务的吗？
更多信息在帖子里，够吗？
我想我也有同样的问题.. stackoverflow.com/questions/61142096/… 。已经悬赏，但没有结果。

标签： c# blazor matblazor

【解决方案1】：

FormContentTemplateRenderFragment 中的字段更新模型时，会触发模板的OnParametersSetAsync 方法，再次从服务器获取数据，更新模型，然后覆盖用户所做的修改。

没有问题，模板中的表单输入只是对它的工作原理有不好的理解。

我通过使用 SetParametersAsync 检查更改的参数是否是我正在寻找的参数而不是 RenderFragment 来纠正问题。 ItemId 是记录的 id，我从 DataService 中获取。

        public override async Task SetParametersAsync(ParameterView parameters)
        {
            _hasIdParameterChange = false;

            if(parameters.TryGetValue(nameof(ItemId), out int? newItemIdValue))
            {
                _hasIdParameterChange = (newItemIdValue != ItemId);
            }

            await base.SetParametersAsync(parameters);
        }

【讨论】：