ASP.NET Core Razor Pages中复用表格Partial功能的最佳方案

针对你遇到的重复编写表格数据逻辑的问题，以下是几种规范且实用的解决方案，按推荐优先级排序：

1. 使用ViewComponent（视图组件） #

这是官方推荐的封装带独立逻辑UI组件的方案，完美适配你需要复用表格视图+数据逻辑的场景。它相当于Partial的升级版，自带专属逻辑类，无需在每个PageModel中重复写代码。

实现步骤： #

（1）创建ViewComponent类

public class TableDataViewComponent : ViewComponent
{
    // 注入依赖，比如数据库上下文或数据服务
    private readonly AppDbContext _dbContext;

    public TableDataViewComponent(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 核心方法：处理数据逻辑，返回视图
    public async Task<IViewComponentResult> InvokeAsync(string filter = null)
    {
        // 这里写填充表格模型的逻辑，比如从数据库查询
        var query = _dbContext.TableItems.AsQueryable();
        if (!string.IsNullOrEmpty(filter))
        {
            query = query.Where(item => item.Name.Contains(filter));
        }
        var model = await query.ToListAsync();
        
        return View(model);
    }
}

（2）创建组件视图

在Views/Shared/Components/TableData/Default.cshtml路径下创建视图（路径结构必须匹配），放入你的表格代码：

@model IEnumerable<TableItem>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td><a asp-page="/Items/Edit" asp-route-id="@item.Id">编辑</a></td>
            </tr>
        }
    </tbody>
</table>

（3）在任意页面调用组件

无需在PageModel中处理数据，直接在页面里调用：

<!-- 无参数调用 -->
<vc:table-data></vc:table-data>

<!-- 带参数调用，比如传递筛选条件 -->
<vc:table-data filter="@Model.SearchKeyword"></vc:table-data>

2. 提取共享数据服务 #

如果不想用ViewComponent，可以把表格数据逻辑抽成独立的服务类，通过依赖注入在各个PageModel中复用，避免重复编写查询逻辑。

实现步骤： #

（1）创建数据服务接口与实现类

public interface ITableDataService
{
    Task<IEnumerable<TableItem>> GetTableItemsAsync(string filter = null);
}

public class TableDataService : ITableDataService
{
    private readonly AppDbContext _dbContext;

    public TableDataService(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task<IEnumerable<TableItem>> GetTableItemsAsync(string filter = null)
    {
        var query = _dbContext.TableItems.AsQueryable();
        if (!string.IsNullOrEmpty(filter))
        {
            query = query.Where(item => item.Name.Contains(filter));
        }
        return await query.ToListAsync();
    }
}

（2）注册服务到DI容器

在Program.cs中添加：

builder.Services.AddScoped<ITableDataService, TableDataService>();

（3）在PageModel中复用逻辑

public class IndexModel : PageModel
{
    private readonly ITableDataService _tableDataService;
    public IEnumerable<TableItem> TableItems { get; set; }

    public IndexModel(ITableDataService tableDataService)
    {
        _tableDataService = tableDataService;
    }

    public async Task OnGetAsync(string filter)
    {
        // 直接调用服务方法，无需重复写查询逻辑
        TableItems = await _tableDataService.GetTableItemsAsync(filter);
    }
}

然后在页面中引用原Partial：

<partial name="_TablePartial" model="@Model.TableItems" />

3. 使用PageModel基类 #

如果多个页面的PageModel本身就有共性，可以把表格数据逻辑放到基类中，让需要的PageModel继承该基类。

实现步骤： #

// 基类PageModel
public class TablePageBase : PageModel
{
    protected readonly ITableDataService _tableDataService;
    public IEnumerable<TableItem> TableItems { get; set; }

    public TablePageBase(ITableDataService tableDataService)
    {
        _tableDataService = tableDataService;
    }

    // 提供默认逻辑，子类可重写
    public virtual async Task OnGetAsync(string filter)
    {
        TableItems = await _tableDataService.GetTableItemsAsync(filter);
    }
}

// 子类PageModel继承基类
public class IndexModel : TablePageBase
{
    public IndexModel(ITableDataService tableDataService) : base(tableDataService)
    {
    }

    // 如需自定义逻辑，重写OnGetAsync
    public override async Task OnGetAsync(string filter)
    {
        await base.OnGetAsync(filter);
        // 添加页面专属逻辑
    }
}

方案对比与推荐 #

• ViewComponent：最贴合UI组件复用场景，逻辑与视图封装在一起，调用最简单，是官方推荐的首选方案。
• 共享数据服务：灵活性高，适合逻辑需要在多个非UI场景复用的情况，但仍需在PageModel中调用。
• PageModel基类：适合多个PageModel有较多共性逻辑的场景，但耦合度略高。

内容的提问来源于stack exchange，提问作者Rabbi Kaii