C# Blazor如何拆分Razor文件中的复杂表格标记？

阿华AIGC实验室

2026-6-15

解决方案：拆分Blazor组件表格标记并访问原组件成员

方案一：使用分部Razor视图（最适配的方案）

你的两个表格本质上属于DataComponent的一部分，只是想拆分标记文件，分部Razor视图是最直接的选择——它允许将同一个组件的标记拆分为多个.razor文件，所有分部文件共享同一个组件类的上下文，包括私有成员。

操作步骤：

创建两个分部Razor文件，命名需与主组件保持一致：
- DataComponent.TableA.razor：存放表格A的完整标记
- DataComponent.TableB.razor：存放表格B的完整标记

在分部文件中直接编写MudBlazor表格代码，无需额外组件声明，可直接访问原组件的私有/公共成员：

// DataComponent.TableA.razor
<Table>
    <thead>
        <tr><th>ID</th><th>名称</th></tr>
    </thead>
    <tbody>
        @foreach(var item in _items)
        {
            <tr><td>@item.Id</td><td>@item.Name</td></tr>
        }
    </tbody>
</Table>

修改主DataComponent.razor，直接引用分部视图内容：

@if (_showTableA)
{
    <DataComponent.TableA />
}
else
{
    <DataComponent.TableB />
}

方案二：封装数据与方法，通过组件参数传递

如果一定要将表格做成独立组件，需要把子组件依赖的成员从私有改为公共/内部，或者封装成视图模型对象，通过组件参数传递：

操作步骤：

创建独立组件TableA.razor和TableB.razor，声明组件参数接收所需数据与方法：

// TableA.razor
[Parameter]
public IEnumerable<YourDataType> Items { get; set; } = Enumerable.Empty<YourDataType>();

[Parameter]
public EventCallback<YourDataType> OnItemClick { get; set; }

<Table>
    <tbody>
        @foreach(var item in Items)
        {
            <tr @onclick="() => OnItemClick.InvokeAsync(item)">
                <td>@item.Id</td>
            </tr>
        }
    </tbody>
</Table>

在主DataComponent.razor中传递参数：

@if (_showTableA)
{
    <TableA Items="_items" OnItemClick="HandleItemClick" />
}
else
{
    <TableB Items="_items" OnItemDelete="HandleItemDelete" />
}

若原组件成员为私有，可封装为公共属性：

// DataComponent.razor.cs
public IEnumerable<YourDataType> Items => _items;
private List<YourDataType> _items = new();

方案三：用RenderFragment加载外部标记文件

若想保留独立标记文件并访问原组件上下文，可将表格标记定义为RenderFragment，在独立文件中编写后引入主组件：

操作步骤：

创建模板文件TableATemplate.razor和TableBTemplate.razor，直接使用主组件成员：

// TableATemplate.razor
<Table>
    @foreach(var item in _items)
    {
        <tr><td>@item.Id</td></tr>
    }
</Table>

在主DataComponent.razor.cs中添加属性加载模板：

private RenderFragment TableATemplate => builder =>
{
    builder.AddContent(0, new TableATemplate().Render());
};

private RenderFragment TableBTemplate => builder =>
{
    builder.AddContent(0, new TableBTemplate().Render());
};

在主DataComponent.razor中使用：
```
@if (_showTableA)
{
    @TableATemplate
}
else
{
    @TableBTemplate
}
```
注意：需保证模板文件与主组件同命名空间，若访问私有成员，需将模板类设为internal并与主组件同程序集。