ASP.NET Core中如何通过PagedListPager向ViewComponent传参实现分页跳转

API 探路者

2026-10-4

ASP.NET Core 视图组件集成PagedList分页实现方案

核心逻辑说明

视图组件本身不能直接作为HTTP请求的端点接收路由参数，你需要通过承载视图组件的页面所属的控制器Action来接收page参数，再将参数传递给视图组件即可完成分页跳转。

具体实现步骤

新增/修改承载视图组件的控制器Action
假设你将AdvListViewComponent嵌入在HomeController的Index页面中，先让该Action接收page参数：

public IActionResult Index(int page = 1)
{
    // 将当前页码传递给视图，用于后续调用视图组件和生成分页链接
    ViewData["CurrentPage"] = page;
    return View();
}

在父视图中调用视图组件时传入page参数
打开Index.cshtml，调用组件时带入当前页码：

@await Component.InvokeAsync("AdvList", new { page = ViewData["CurrentPage"] })

修改视图组件视图中的分页控件代码
打开AdvListViewComponent对应的视图文件（默认路径为Views/Shared/Components/AdvList/Default.cshtml），将分页控件的跳转地址指向上述控制器Action：

@Html.PagedListPager(Model, page => Url.Action("Index", "Home", new { page }))

性能优化建议

你当前视图组件的代码存在两个问题：标记了async但没有异步操作、先查询全表数据再分页性能极差，建议修改为如下写法：

public async Task<IViewComponentResult> InvokeAsync(int page = 1)
{
    var adv = _db.advertisements.OrderByDescending(i => i.AdvId); 
    // 用异步分页方法，直接查询当前页数据，避免全表扫描
    return View(await adv.ToPagedListAsync(page, 6));
}