ASP.NET Web Forms中GridView分页链接改为灰色按钮的实现

一、CSS方案（推荐） #

首先在GridView配置中为PagerStyle指定自定义CSS类：

<asp:GridView ID="GridView1" runat="server" AllowPaging="True">
    <PagerStyle CssClass="grid-pager" />
    <!-- 其他GridView配置项 -->
</asp:GridView>

添加以下CSS代码，统一分页按钮的尺寸、背景色，解决样式不一致问题：

/* 分页容器整体样式 */
.grid-pager {
    padding: 10px 0;
    text-align: center;
}

/* 消除默认表格单元格的padding差异 */
.grid-pager td {
    padding: 0 3px;
}

/* 统一分页链接和当前页文本的样式 */
.grid-pager a, .grid-pager span {
    display: inline-block; /* 强制宽高生效 */
    width: 38px;
    height: 38px;
    line-height: 38px; /* 让文字垂直居中 */
    text-align: center;
    text-decoration: none;
    background-color: #e5e5e5; /* 浅灰色背景 */
    color: #333;
    border-radius: 4px;
}

/* 鼠标悬停时的背景色变化 */
.grid-pager a:hover {
    background-color: #d0d0d0;
}

/* 当前页的样式区分 */
.grid-pager span {
    background-color: #d0d0d0;
    font-weight: bold;
    cursor: default;
}

关键说明： #

• 用inline-block确保宽高设置生效，解决不同分页元素尺寸不一致的问题
• 统一line-height与高度值，让文字垂直居中
• 采用浅灰色系作为背景，匹配预期的按钮样式
• 消除默认表格单元格的padding差异，避免按钮间距混乱

二、非CSS自定义分页方案（完全可控） #

如果默认Pager渲染结构难以调整，可以直接自定义PagerTemplate，完全控制分页按钮生成：

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging">
    <PagerTemplate>
        <div class="custom-pager">
            <asp:LinkButton ID="lnkFirst" runat="server" CommandName="Page" CommandArgument="First" CssClass="pager-btn">首页</asp:LinkButton>
            <asp:LinkButton ID="lnkPrev" runat="server" CommandName="Page" CommandArgument="Prev" CssClass="pager-btn">上一页</asp:LinkButton>
            
            <%-- 动态生成页码按钮 --%>
            <% for (int i = 1; i <= GridView1.PageCount; i++) { %>
                <asp:LinkButton 
                    ID="lnkPage<%=i%>" 
                    runat="server" 
                    CommandName="Page" 
                    CommandArgument="<%=i%>" 
                    CssClass='pager-btn <%=i == GridView1.PageIndex + 1 ? "active-page" : "" %>'>
                    <%=i%>
                </asp:LinkButton>
            <% } %>
            
            <asp:LinkButton ID="lnkNext" runat="server" CommandName="Page" CommandArgument="Next" CssClass="pager-btn">下一页</asp:LinkButton>
            <asp:LinkButton ID="lnkLast" runat="server" CommandName="Page" CommandArgument="Last" CssClass="pager-btn">末页</asp:LinkButton>
        </div>
    </PagerTemplate>
    <!-- 其他GridView配置项 -->
</asp:GridView>

配套CSS样式：

.custom-pager {
    padding: 10px 0;
    text-align: center;
}

.pager-btn {
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border: none;
    background-color: #e5e5e5;
    color: #333;
    margin: 0 2px;
    cursor: pointer;
    border-radius: 4px;
}

.pager-btn.active-page {
    background-color: #d0d0d0;
    font-weight: bold;
    cursor: default;
}

.pager-btn:hover {
    background-color: #d0d0d0;
}

后台代码补充（处理分页事件） #

需要在后台实现PageIndexChanging事件：

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    // 重新绑定GridView数据
    BindGridViewData();
}

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