Blazor 模板中的两种数据绑定方式

Question

我想在模板内的组件与其父组件之间使用双向数据绑定。数据绑定的一种方式运行良好。但是当我修改从 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 获取组件。这里部分 class 链接到模板：

    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);
            // ....
        }
}

Answer 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);
        }

Blazor 模板中的两种数据绑定方式

Two way data-binding inside blazor template

c#

blazor

matblazor

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