Blazor通用CRUD组件中如何让内部currentItem属性对Render Fragment可用

问题根源 #

你目前遇到的访问不到currentItem的核心原因是：

• 自定义字段的CustomFields参数用的是无参的RenderFragment，这类片段的代码作用域是编写该片段的业务页面，不是渲染这个片段的BasicCatalogCRUD、BasicCatalogoForm组件
• 不管你在组件内部怎么给无参片段赋值、传值、用级联值，都没法跨作用域把组件内部的currentItem暴露给定义片段的页面代码
• 弹窗是DialogService独立渲染的节点，天然不继承原组件DOM树的级联值上下文，这也是之前试级联值方案失败的原因

改造步骤 #

1. 替换参数为带上下文的泛型渲染片段 #

Blazor中跨组件传递作用域数据给自定义片段，必须用RenderFragment<TValue>类型的泛型片段，这类片段支持把渲染方的上下文数据传递给片段本身的代码作用域。

• 先修改BasicCatalogCRUD中的参数定义，把原来的无参CustomFields替换为泛型版本：

// 原有写法
// [Parameter] public RenderFragment CustomFields { get; set; }

// 改造后：泛型片段接收当前操作的TItem类型实例作为上下文
[Parameter] public RenderFragment<TItem> CustomFields { get; set; }

• 同步修改BasicCatalogoForm中的对应参数定义，保持类型一致：

// 原有写法
// [Parameter] public RenderFragment CustomFields { get; set; }

// 改造后
[Parameter] public RenderFragment<TItem> CustomFields { get; set; }

2. 渲染片段时传入当前上下文实例 #

在BasicCatalogoForm的字段渲染位置，不要直接输出无参片段，要把当前表单绑定的CurrentItem作为参数调用泛型片段：

<RadzenFieldset>
    @* 内置的通用字段渲染逻辑 *@
    @* 传入当前项作为片段的上下文 *@
    @CustomFields?.Invoke(CurrentItem)
</RadzenFieldset>

注意：这里的?.Invoke()是防御性写法，避免页面没定义自定义字段时抛空引用异常

3. 保持原有弹窗参数透传逻辑 #

LoadDataOnForm方法中传给弹窗的参数不需要做额外改动，只要把定义好的CustomFields片段原样透传给Form组件即可：

void LoadDataOnForm(TItem objectInstance)
{
    currentItem = objectInstance;
    Dictionary<string, object> parameters = new Dictionary<string, object>();
    parameters.Add("CurrentItem", objectInstance);
    parameters.Add("FieldTitle", GetActionLabel());
    parameters.Add("ItemGrid", itemGrid);
    parameters.Add("LabelBuilder", labelBuilder);
    parameters.Add("DataService", DataService);
    // 泛型片段直接透传，不需要额外包装
    parameters.Add("CustomFields", CustomFields);

    DialogOptions dialogOptions = new DialogOptions() { Width = "700px", Height = "600px" };
    DialogService.Open<BasicCatalogoForm<TItem>>(GetActionLabel(), parameters, dialogOptions);
}

业务页面的使用方式 #

改造完成后，在业务代码中写自定义字段时，可以通过Context关键字给传入的当前项起别名，直接在片段内绑定数据，不需要访问CRUD组件的内部私有字段：

<BasicCatalogCRUD TItem="CustomModel" DataService="@CustomService" CrudTitle="@modelLocalizer["Custom.crud.title"]">
    <CustomColumns>
        <div>原有自定义列逻辑保持不变</div>
    </CustomColumns>
    @* 指定泛型片段的上下文变量名为formItem *@
    <CustomFields Context="formItem">
        <RadzenTextBox Label="自定义业务字段" @bind-Value="formItem.CustomField" />
        @* 这里的formItem就是实际在表单中操作的当前实例 *@
    </CustomFields>
</BasicCatalogCRUD>

内容的提问来源于stack exchange，提问作者Omar Yafer