WebForms中GridView分页器无法缩小及去除边框的问题求助

Hey there! Since you're new to WebForms, it's totally normal to run into styling headaches with built-in controls like GridView's pager. The default pager is tied to the GridView's table structure, which is why your attempts with PagerStyle properties and basic CSS weren't giving you the result you wanted. Let's fix this with a custom pager template—this gives you full control over the layout and styling.

Step 1: Add a Custom PagerTemplate to Your GridView #

Instead of relying on the default pager, define your own template inside the GridView. This lets you use divs instead of table cells, which are way easier to style:

<asp:GridView ID="YourGridViewID" runat="server" 
    AllowPaging="True"
    OnPageIndexChanging="YourGridViewID_PageIndexChanging"
    OnDataBound="YourGridViewID_DataBound">
    
    <!-- Your existing Columns go here -->

    <PagerTemplate>
        <div class="custom-grid-pager">
            <!-- First/Previous buttons -->
            <asp:LinkButton ID="lnkFirst" runat="server" 
                CommandName="Page" CommandArgument="First" 
                Text="<<" CssClass="pager-square"></asp:LinkButton>
            <asp:LinkButton ID="lnkPrev" runat="server" 
                CommandName="Page" CommandArgument="Prev" 
                Text="<" CssClass="pager-square"></asp:LinkButton>

            <!-- Dynamic page number buttons (using a Repeater) -->
            <asp:Repeater ID="rptPageNumbers" runat="server" 
                OnItemDataBound="rptPageNumbers_ItemDataBound">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkPage" runat="server" 
                        CommandName="Page" 
                        CommandArgument='<%# Container.DataItem %>'
                        Text='<%# Container.DataItem %>'
                        CssClass='pager-square <%# (Container.DataItem.ToString() == YourGridViewID.PageIndex.ToString() ? "active-page" : "") %>'></asp:LinkButton>
                </ItemTemplate>
            </asp:Repeater>

            <!-- Next/Last buttons -->
            <asp:LinkButton ID="lnkNext" runat="server" 
                CommandName="Page" CommandArgument="Next" 
                Text=">" CssClass="pager-square"></asp:LinkButton>
            <asp:LinkButton ID="lnkLast" runat="server" 
                CommandName="Page" CommandArgument="Last" 
                Text=">>" CssClass="pager-square"></asp:LinkButton>
        </div>
    </PagerTemplate>
</asp:GridView>

Step 2: Add Backend Code to Bind Page Numbers #

You need to populate the Repeater with page numbers when the GridView finishes binding. Add these methods to your code-behind:

protected void YourGridViewID_DataBound(object sender, EventArgs e)
{
    // Find the Repeater in the pager row
    Repeater pageRepeater = (Repeater)YourGridViewID.BottomPagerRow.FindControl("rptPageNumbers");
    if (pageRepeater != null)
    {
        List<int> pageNumbers = new List<int>();
        for (int i = 0; i < YourGridViewID.PageCount; i++)
        {
            pageNumbers.Add(i + 1); // Pages are 1-indexed for users
        }
        pageRepeater.DataSource = pageNumbers;
        pageRepeater.DataBind();
    }
}

protected void rptPageNumbers_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    LinkButton pageBtn = (LinkButton)e.Item.FindControl("lnkPage");
    int currentPageIndex = int.Parse(pageBtn.CommandArgument) - 1;
    
    // Disable the button for the current page
    if (currentPageIndex == YourGridViewID.PageIndex)
    {
        pageBtn.Enabled = false;
    }
}

protected void YourGridViewID_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    YourGridViewID.PageIndex = e.NewPageIndex;
    // Rebind your GridView data here (call your data binding method)
    BindGridViewData();
}

Step 3: Add CSS for the Small, Borderless Squares #

Now style the pager exactly how you want it. Add this CSS to your page or stylesheet:

.custom-grid-pager {
    text-align: right; /* Align the entire pager to the right */
    padding: 8px 0;
}

.pager-square {
    display: inline-block;
    width: 24px; /* Small square width */
    height: 24px; /* Small square height */
    line-height: 24px; /* Vertically center text */
    text-align: center;
    margin: 0 3px;
    border: none; /* Remove all borders */
    background-color: #e9ecef; /* Light gray default background */
    color: #495057;
    text-decoration: none;
    cursor: pointer;
}

.pager-square:hover {
    background-color: #dee2e6; /* Darker gray on hover */
}

.pager-square.active-page,
.pager-square:disabled {
    background-color: #007bff; /* Blue for active page */
    color: white;
    cursor: default;
}

Why Your Previous Attempts Didn't Work #

The default GridView pager is rendered inside a TableRow and TableCell, which inherit styles from the GridView's table and have default padding/borders that are hard to override with just PagerStyle properties. By using a custom PagerTemplate, you're breaking free from that table structure and using divs, which let you fully control every aspect of the styling.

Just make sure to replace YourGridViewID and BindGridViewData() with your actual GridView ID and data binding method, and you should get that clean, right-aligned, small square pager you're looking for!

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