Apply Bootstrap class to custom pager using Repeater in ASP.Net

Last Reply 22 days ago By pandeyism

Posted 23 days ago

Hello experts,

I used pagination as described in this article:

Custom Paging in ASP.Net GridView using MySql Stored Procedure

i want to customize the pagination by adding bootstrap 4 classes to be like:

https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp

this is what i did but the current page is not highlighted.

i hope you can help 

<ul class="pagination">
    <asp:Repeater ID="rptPager" runat="server">
        <ItemTemplate>
            <li class="page-item">
                <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                    CssClass="page-link" OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'>
                </asp:LinkButton>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>			
Posted 22 days ago

Hi ahmeddeeb,

Refer below sample code.

HTML

CS.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        .page_enabled
        {
            background-color: #007AFE;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" PageSize="5">
        <Columns>
            <asp:BoundField HeaderText="CustomerId" DataField="CustomerID" />
            <asp:BoundField HeaderText="ContactName" DataField="ContactName" />
            <asp:BoundField HeaderText="CompanyName" DataField="CompanyName" />
        </Columns>
    </asp:GridView>
    <br />
    <ul class="pagination">
        <asp:Repeater ID="rptPager" runat="server">
            <ItemTemplate>
                <li class="page-item">
                    <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                        CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page-link" : "page-link page_enabled" %>'
                        OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    </form>
</body>
</html>

VB.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .page_enabled
        {
            background-color: #007AFE;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="CustomerId" DataField="CustomerID" />
            <asp:BoundField HeaderText="ContactName" DataField="ContactName" />
            <asp:BoundField HeaderText="CompanyName" DataField="CompanyName" />
        </Columns>
    </asp:GridView>
    <br />
    <asp:Repeater ID="rptPager" runat="server">
        <ItemTemplate>
            <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                CssClass='<%# If(Convert.ToBoolean(Eval("Enabled")), "page-link", "page-link page_enabled")%>'
                OnClick="Page_Changed" OnClientClick='<%# If(Not Convert.ToBoolean(Eval("Enabled")), "return false;", "") %>'></asp:LinkButton>
        </ItemTemplate>
    </asp:Repeater>
    </form>
</body>
</html>

Screenshot