ASP.NET Core中如何通过分页提交按钮传递查询参数

我实现了一个IHtmlHelper扩展分页辅助方法，用于为指定表单生成带有页码的提交按钮列表，方法代码如下：

public static IHtmlContent PageButtons(this IHtmlHelper html, PagingInfo pagingInfo)
{
    var listOfButtons = new TagBuilder("li");
    listOfButtons.AddCssClass("markers_list_list");

    for (int i = 1; i <= pagingInfo.TotalPages; i++)
    {
        TagBuilder button = new ("button");

        button.MergeAttribute("type", "submit");
        button.MergeAttribute("form", "mainForm");
        button.InnerHtml.AppendHtmlLine(i.ToString());

        if ((i < (pagingInfo.CurrentPage - 5) || i > (pagingInfo.CurrentPage + 5)) && (i > 1 & i < pagingInfo.TotalPages))
            button.AddCssClass("d-none");

        if (i == pagingInfo.CurrentPage)
        {
            button.AddCssClass("selected");
            button.AddCssClass("btn-primary");
        }

        button.AddCssClass("btn btn-default");

        listOfButtons.InnerHtml.AppendHtml(button);
    }

    return listOfButtons;
}

在Razor视图中通过如下方式调用该方法渲染分页按钮区域：

<div class="entities_list_page_links">
    @Html.PageButtons(Model.PagingInfo)
</div>

需求为：点击任意分页按钮时，将按钮对应的页码数值作为查询参数传递。

根据场景有两种可选实现方式，按需选择即可：

方案1：保留现有表单提交逻辑（适合需要携带表单其他筛选参数的场景） #

你当前的按钮是绑定mainForm的提交按钮，表单提交规则是：只有触发本次提交的按钮，它的name和value属性值会被随请求一起发送。不需要额外编写JS逻辑，只需要在生成按钮时给每个按钮加上两个属性：

• 给按钮添加name属性，值和后端Action接收页码的参数名保持一致，比如常用的currentPage、pageIndex
• 给按钮添加value属性，值为当前循环的页码数值i

修改按钮生成部分的代码：

TagBuilder button = new ("button");
button.MergeAttribute("type", "submit");
button.MergeAttribute("form", "mainForm");
// 新增以下两行配置
button.MergeAttribute("name", "currentPage");
button.MergeAttribute("value", i.ToString());
button.InnerHtml.AppendHtmlLine(i.ToString());

如果你的表单method设置为GET，页码参数会自动拼接到URL的查询字符串中；如果是POST提交，参数会包含在请求体里，后端直接定义对应名称的int类型参数就能接收，同时表单内其他输入项的筛选值也会一并提交。

方案2：直接生成带查询参数的跳转链接（适合不需要携带其他表单参数的纯分页场景） #

如果不需要联动表单内的其他筛选条件，可以直接把提交按钮替换为<a>标签，把页码直接拼接到链接的查询参数中，不需要依赖表单提交：

for (int i = 1; i <= pagingInfo.TotalPages; i++)
{
    // 替换原来的button为a标签
    TagBuilder pageLink = new TagBuilder("a");
    // 自动获取当前页面路径，拼接页码查询参数
    var currentPath = html.ViewContext.HttpContext.Request.Path;
    pageLink.MergeAttribute("href", $"{currentPath}?currentPage={i}");
    pageLink.AddCssClass("btn btn-default");

    if ((i < (pagingInfo.CurrentPage - 5) || i > (pagingInfo.CurrentPage + 5)) && (i > 1 & i < pagingInfo.TotalPages))
        pageLink.AddCssClass("d-none");

    if (i == pagingInfo.CurrentPage)
    {
        pageLink.AddCssClass("selected");
        pageLink.AddCssClass("btn-primary");
    }

    pageLink.InnerHtml.Append(i.ToString());
    listOfButtons.InnerHtml.AppendHtml(pageLink);
}

这种方式点击按钮会直接跳转到带页码参数的URL，逻辑更简单，不依赖表单存在。

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