如何在Blazor中复用FormBasePage的HTML与组件至多页面？

完全可以通过Blazor的**RenderFragment（渲染片段）**特性实现这种布局复用，让基类FormBasePage统一管理页眉、页脚及通用组件（如删除确认模态框），子页面仅需关注自身业务内容。以下是具体实现步骤：

1. 重构基类FormBasePage #

将基类改造为带通用布局的抽象组件，内置页眉、页脚内容，同时预留子页面内容的占位：

@inherits ComponentBase

<!-- 基类统一布局结构 -->
<div class="form-wrapper">
    <!-- 通用页眉 -->
    @RenderHeader()
    <!-- 子页面自定义内容占位 -->
    @ChildContent
    <!-- 通用页脚 -->
    @RenderFooter()
</div>

@code {
    public int Identifier { get; set; }
    // 接收子页面的自定义内容
    protected RenderFragment? ChildContent { get; set; }
    // 控制删除模态框显示
    protected bool ShowDeleteModal { get; set; }

    // 渲染通用页眉（含标识符、删除模态框）
    private RenderFragment RenderHeader() => __builder =>
    {
        <header class="form-header">
            <h2>当前记录ID：@Identifier</h2>
            <button @onclick="() => ShowDeleteModal = true" class="delete-btn">删除记录</button>
            
            <!-- 通用删除确认模态框 -->
            @if (ShowDeleteModal)
            {
                <div class="modal-overlay">
                    <div class="modal">
                        <p>确认删除ID为@Identifier的记录吗？</p>
                        <div class="modal-actions">
                            <button @onclick="HandleDelete" class="confirm-btn">确认</button>
                            <button @onclick="() => ShowDeleteModal = false" class="cancel-btn">取消</button>
                        </div>
                    </div>
                </div>
            }
        </header>
    };

    // 渲染通用页脚（含通用操作按钮）
    private RenderFragment RenderFooter() => __builder =>
    {
        <footer class="form-footer">
            <button @onclick="SaveForm" class="save-btn">保存</button>
            <button @onclick="CancelForm" class="cancel-btn">取消</button>
        </footer>
    };

    // 通用方法，子页面可按需重写
    protected virtual void SaveForm()
    {
        // 默认保存逻辑，子页面可覆盖实现业务专属逻辑
    }

    protected virtual void CancelForm()
    {
        // 默认取消逻辑
    }

    protected virtual void HandleDelete()
    {
        // 默认删除逻辑，子页面可覆盖
        ShowDeleteModal = false;
    }
}

2. 子页面继承并填充自定义内容 #

以ProductForm为例，仅需继承基类并传递自身业务内容即可，无需重复编写页眉、页脚及模态框代码：

@inherits FormBasePage

@{
    // 将当前页面的业务内容赋值给基类的ChildContent
    ChildContent = __builder =>
    {
        <div class="product-form-content">
            <label>产品名称：</label>
            <input @bind="ProductName" class="form-input" />
            
            <label>产品价格：</label>
            <input @bind="ProductPrice" type="number" class="form-input" />
            
            <!-- 其他产品专属表单字段 -->
        </div>
    };
}

@code {
    public string ProductName { get; set; } = string.Empty;
    public decimal ProductPrice { get; set; }

    // 重写基类的保存方法，实现产品专属逻辑
    protected override void SaveForm()
    {
        Console.WriteLine($"保存产品：{ProductName}，价格：{ProductPrice}");
        // 业务逻辑...
    }
}

CustomerForm的实现逻辑完全一致，仅需替换自身业务字段及重写对应方法即可。

核心优势 #

• 代码复用最大化：页眉、页脚、模态框等通用元素仅需编写一次，所有子页面自动继承
• 职责分离：子页面专注业务逻辑，基类专注通用布局与逻辑
• 扩展性强：通用方法（如保存、删除）支持子页面重写，兼顾通用与个性化需求

内容的提问来源于stack exchange，提问作者Marvin Klein