Blazor中如何向布局传入含编辑表单的Razor页面组件

1. 扩展布局组件的泛型参数与输入项 #

在你的Grid布局组件中，新增组件类型参数来接收编辑表单的Razor组件类型，同时保留原有实体类泛型参数：

@typeparam TItem
@typeparam TEditForm where TEditForm : ComponentBase

<!-- 原有GridView区域 -->
<GridView TItem="TItem" Items="@Items" />

<!-- 编辑表单容器，按需渲染 -->
@if (ShowEditForm)
{
    <Component Type="@EditFormType" Parameters="@EditFormParameters" />
}

@code {
    // 原有GridView绑定数据参数
    [Parameter]
    public IEnumerable<TItem> Items { get; set; } = Enumerable.Empty<TItem>();

    // 编辑表单组件类型
    [Parameter]
    public Type EditFormType { get; set; } = typeof(TEditForm);

    // 传递给编辑表单的参数集合
    [Parameter]
    public Dictionary<string, object> EditFormParameters { get; set; } = new();

    // 控制编辑表单显示/隐藏的开关
    [Parameter]
    public bool ShowEditForm { get; set; }
}

2. 调用布局时传入对应编辑表单 #

在使用该布局的页面中，直接指定目标编辑表单类型，并传递必要参数（如当前待编辑的实体对象）：

<GridLayout TItem="Order" TEditForm="OrderEditForm" 
            Items="@_orderList"
            ShowEditForm="@_isEditOpen"
            EditFormParameters="@new Dictionary<string, object> { { "CurrentOrder", _selectedOrder } }">
</GridLayout>

@code {
    private List<Order> _orderList = new();
    private Order _selectedOrder;
    private bool _isEditOpen;

    // 打开编辑表单的触发方法
    private void TriggerEdit(Order order)
    {
        _selectedOrder = order;
        _isEditOpen = true;
    }
}

3. 统一编辑表单组件规范 #

所有编辑表单只需遵循统一参数约定即可适配布局，无需额外修改：

@* OrderEditForm.razor *@
<EditForm Model="@CurrentOrder" OnValidSubmit="@SubmitEdit">
    <InputText @bind-Value="CurrentOrder.OrderNumber" />
    <InputDate @bind-Value="CurrentOrder.CreateTime" />
    <button type="submit">确认保存</button>
    <button @onclick="@Cancel">取消</button>
</EditForm>

@code {
    [Parameter]
    public Order CurrentOrder { get; set; } = new();

    [Parameter]
    public EventCallback OnCancel { get; set; }

    private async Task SubmitEdit()
    {
        // 表单提交逻辑
    }

    private async Task Cancel()
    {
        await OnCancel.InvokeAsync();
    }
}

4. 优化按需显示体验 #

如果需要弹窗形式展示编辑表单，可将布局中的表单容器替换为弹窗组件：

@if (ShowEditForm)
{
    <Modal IsVisible="ShowEditForm" OnClose="@(() => ShowEditForm = false)">
        <Component Type="@EditFormType" Parameters="@EditFormParameters" />
    </Modal>
}

这种方式支持任意数量的编辑表单组件，只要符合泛型约束和参数约定，就能无缝接入布局实现按需加载。

内容的提问来源于stack exchange，提问作者Kasra Ghavami