c# - Blazor 模板内的两种方式数据绑定
问题描述
我想在模板内的组件与其父级之间使用双向数据绑定。数据绑定运行良好的一种方式。但是当我修改从 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);
// ....
}
}
解决方案
当FormContentTemplate
RenderFragment 中的字段更新模型时,它会触发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);
}
推荐阅读
- android - JSONArray 无法在 Android 中转换为 JSONObject
- web - 将 Shopify 商店特定页面或路径连接到您的子域
- python - 你将如何反转这个 rot_13 和十六进制密码?
- excel - VBA Excel -> 在页码下方添加图片
- php - 互相喜欢加入查询时获取全部记录
- python - 我无法修复运行时错误
- javascript - 测试一个元素在 Jest/RTL 中只存在一次
- python - python csv转换为嵌套字典
- python - Django发送邮件抛出服务器繁忙错误
- javascript - 嵌套对象的 Ramda 排序数组