如何突出显示分页中的当前数字 - GridView PagerTemplate？

Question

这是我在 GridView 中的当前设计，悬停时单元格变为橙色，这是通过使用 css 实现的。但我的问题是，如果它是活动的单元格背景颜色，我该如何更改它？

图片：Current Design

HTML 代码：（仅限 GridView）

 <asp:GridView ID="GridView1" runat="server" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging"
    AllowPaging="True" OnDataBound="GridView1_DataBound"
    Style="position: static">
    <PagerSettings Position="Top" Mode="Numeric" />
    <PagerStyle ForeColor="Black" HorizontalAlign="Center" Font-Underline="False" CssClass="pager" />
    <PagerTemplate>
        <table id="tablePager">
            <tr style="background-color: #F8F8F8;">
                <td>
                    <asp:LinkButton ID="First" CommandName="Page" CommandArgument="First" runat="server"
                        Text="&lt;&lt; First" Style="color: black" ForeColor="Black" Font-Underline="False"></asp:LinkButton>
                </td>
                <td>
                    <asp:LinkButton ID="Previous" CommandName="Page" CommandArgument="Prev" runat="server"
                        Text="&lt; Previous" Style="color: black" ForeColor="Black" Font-Underline="False"></asp:LinkButton>
                </td>
                <asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater_ItemCommand" OnItemDataBound="Repeater_ItemDataBound" OnLoad="Repeater_Load">
                    <ItemTemplate>
                        <td id="cell">
                            <asp:LinkButton ID="lnkPageNumber" CommandName="Page" runat="server" ForeColor="Black" Font-Underline="False" />

                        </td>
                    </ItemTemplate>
                </asp:Repeater>
                <td>
                    <asp:LinkButton ID="Next" CommandName="Page" CommandArgument="Next" runat="server"
                        Text="Next &gt;" ForeColor="Black" Font-Underline="False"></asp:LinkButton>
                </td>
                <td>
                    <asp:LinkButton ID="Last" CommandName="Page" CommandArgument="Last" runat="server"
                        Text="Last &gt;&gt;" Style="color: black" ForeColor="Black" Font-Underline="False"></asp:LinkButton>
                </td>
            </tr>
        </table>
    </PagerTemplate>
</asp:GridView>

代码背后：

页面加载

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        PopulateGridView();
    }
}

填充网格视图

public void PopulateGridView()
{
    String constring = System.Configuration.ConfigurationManager.ConnectionStrings["sqlconnect"].ToString();
    MySqlConnection con = new MySqlConnection(constring);
    using (MySqlCommand cmd = new MySqlCommand("SELECT * FROM tabletester"))
    {
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        con.Open();
        MySqlDataReader reader = cmd.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(reader);

        con.Close();

        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Repeater_ItemCommand

protected void Repeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "Page")
    {
        GridView1.PageIndex = Convert.ToInt32(e.CommandArgument);
        GridView1.DataBind();
        PopulateGridView();
    }
}

Repeater_ItemDataBound

protected void Repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    LinkButton lnkPageNumber = new LinkButton();
    System.Int32 pageNumber = (System.Int32)e.Item.DataItem;

    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        lnkPageNumber = (LinkButton)e.Item.FindControl("lnkPageNumber");
        lnkPageNumber.Text = pageNumber.ToString();
        lnkPageNumber.CommandArgument = (pageNumber - 1).ToString();
    }
}

Repeater_Load

protected void Repeater_Load(object sender, EventArgs e)
{
    Repeater Repeater = (Repeater)sender;
    Repeater.DataSource = Enumerable.Range(1, GridView1.PageCount);
    Repeater.DataBind();
}

Answer 1

你可以在Repeater_ItemDataBound做这样的事情

if (e.Item.ItemIndex == GridView1.PageIndex)
{
    lnkPageNumber.ForeColor = Color.Red;
}

也就是说，你现在的 GridView 有内置的分页系统吗？比你正在做的过于复杂的事情要容易得多。以下是它所需要的所有代码：

ASPX

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="5" 
   OnPageIndexChanging="GridView1_PageIndexChanging"></asp:GridView>

代码

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack == false)
    {
        BindDataToGridView();
    }
}

private void BindDataToGridView()
{
    GridView1.DataSource = source;
    GridView1.DataBind();
}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    BindDataToGridView();
}

这就是 IT。功能性分页系统所需的所有代码。