Implement ASP.Net Repeater paging with Bootstrap active class using C# and VB.Net

Hi avsnath,

Please refer below sample.

XML

<root>
  <row>
    <Cid>1</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>2</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>3</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>4</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>5</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>6</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>7</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>8</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>9</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>10</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>11</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>12</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>13</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>14</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>15</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>16</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>17</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>18</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>19</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>20</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>21</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>22</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>23</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>24</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>25</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>26</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>27</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>28</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>29</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>30</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>31</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>32</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>33</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>34</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>35</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>36</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>37</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>38</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>39</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>40</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>41</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>42</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>43</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>44</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>45</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>46</Cid>
    <Cname>Subhash</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>47</Cid>
    <Cname>Sundar</Cname>
    <Cplace>Rjay</Cplace>
  </row>
  <row>
    <Cid>48</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Viz</Cplace>
  </row>
  <row>
    <Cid>49</Cid>
    <Cname>Sundar</Cname>
    <Cplace>KKD</Cplace>
  </row>
  <row>
    <Cid>50</Cid>
    <Cname>Subhash</Cname>
    <Cplace>Rjay</Cplace>
  </row>
</root>

HTML

C#

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid" style="margin: 10px;">
    <asp:Repeater ID="rptUserData" runat="server">
        <HeaderTemplate>
            <div class="listing_header">
                <h5>
                    Listings Grid Layout</h5>
                <div class="layout-switcher">
                    <i class="fa fa-align-justify"></i></a>
                </div>
            </div>
            <div class="row">
        </HeaderTemplate>
        <ItemTemplate>
            <div class="col-md-4 grid_view show_listing">
                <div class="listing_wrap">
                    <div class="listing_img">
                        <span class="like_post"><i class="fa fa-bookmark-o"></i></span>
                        <div class="listing_cate">
                            <span class="cate_icon"><a href="#">
                                <%-- <img src="assets/images/category-icon5.png" alt="icon-img"></a></span>--%>
                                <span class="listing_like"><a href="#"><i class="fa fa-heart-o"></i></a></span>
                        </div>
                        <a href="#">
                            <%--<img src="assets/images/listing_img6.jpg" alt="image"></a>--%>
                    </div>
                    <div class="listing_info">
                        <div class="post_category">
                            <a href="#">
                                <%#Eval("CId").ToString()%></a>
                        </div>
                        <h4>
                            <a href="#">
                                <%#Eval("CName").ToString()%></a></h4>
                        <p>
                            <%#Eval("CPlace").ToString()%></p>
                        <div class="listing_review_info">
                            <p>
                                <span class="review_score">4.0/5</span> <i class="fa fa-star active"></i><i class="fa fa-star active">
                                </i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star">
                                </i>(5 Reviews)
                            </p>
                            <p class="listing_map_m">
                                <i class="fa fa-map-marker"></i>Los Angeles</p>
                        </div>
                    </div>
                </div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
            </div>
        </FooterTemplate>
    </asp:Repeater>
    <nav class="pagination_nav">
        <ul class="pagination">
            <asp:Repeater ID="rptPaging" runat="server" onitemcommand="rptPaging_ItemCommand">
                <ItemTemplate>
                    <li class='<%#this.ActiveIndex == Convert.ToInt32(Container.DataItem) ? "active" : "" %>'>
                        <asp:LinkButton ID="lnkPage" runat="server" CommandName="Page" 
                        CommandArgument="<%# Container.DataItem %>"><%# Container.DataItem %></asp:LinkButton>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </nav>
</div>

VB.Net

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid" style="margin: 10px;">
    <asp:Repeater ID="rptUserData" runat="server">
        <HeaderTemplate>
            <div class="listing_header">
                <h5>
                    Listings Grid Layout</h5>
                <div class="layout-switcher">
                    <i class="fa fa-align-justify"></i></a>
                </div>
            </div>
            <div class="row">
        </HeaderTemplate>
        <ItemTemplate>
            <div class="col-md-4 grid_view show_listing">
                <div class="listing_wrap">
                    <div class="listing_img">
                        <span class="like_post"><i class="fa fa-bookmark-o"></i></span>
                        <div class="listing_cate">
                            <span class="cate_icon"><a href="#">
                                <%-- <img src="assets/images/category-icon5.png" alt="icon-img"></a></span>--%>
                                <span class="listing_like"><a href="#"><i class="fa fa-heart-o"></i></a></span>
                        </div>
                        <a href="#">
                            <%--<img src="assets/images/listing_img6.jpg" alt="image"></a>--%>
                    </div>
                    <div class="listing_info">
                        <div class="post_category">
                            <a href="#">
                                <%#Eval("CId").ToString()%></a>
                        </div>
                        <h4>
                            <a href="#">
                                <%#Eval("CName").ToString()%></a></h4>
                        <p>
                            <%#Eval("CPlace").ToString()%></p>
                        <div class="listing_review_info">
                            <p>
                                <span class="review_score">4.0/5</span> <i class="fa fa-star active"></i><i class="fa fa-star active">
                                </i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star">
                                </i>(5 Reviews)
                            </p>
                            <p class="listing_map_m">
                                <i class="fa fa-map-marker"></i>Los Angeles</p>
                        </div>
                    </div>
                </div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
            </div>
        </FooterTemplate>
    </asp:Repeater>
    <nav class="pagination_nav">
        <ul class="pagination">
            <asp:Repeater ID="rptPaging" runat="server" onitemcommand="rptPaging_ItemCommand">
                <ItemTemplate>
                    <li class='<%# If(Me.ActiveIndex = Convert.ToInt32(Container.DataItem) , "active" , "") %>'>
                        <asp:LinkButton ID="lnkPage" runat="server" CommandName="Page" 
                        CommandArgument="<%# Container.DataItem %>"><%# Container.DataItem %></asp:LinkButton>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </nav>
</div>

Code

C#

protected int ActiveIndex { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.ActiveIndex = 1;
        this.BindRepeater();
    }
}

protected void rptPaging_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    ViewState["PageNumber"] = Convert.ToInt32(e.CommandArgument) - 1;
    this.ActiveIndex = Convert.ToInt32(e.CommandArgument);
    this.BindRepeater();
}

private void BindRepeater()
{
    DataSet ds = new DataSet();
    ds.ReadXml(Server.MapPath("~/XMLFile.xml"));
    if (ds != null && ds.HasChanges())
    {
        rptUserData.DataSource = ds;
        rptUserData.DataBind();
    }
    else
    {
        rptUserData.DataBind();
    }

    DataTable dt = ds.Tables[0];
    PagedDataSource pageds = new PagedDataSource();
    DataView dv = new DataView(dt);
    pageds.DataSource = dv;
    pageds.AllowPaging = true;
    pageds.PageSize = 6;

    if (ViewState["PageNumber"] != null)
    {
        pageds.CurrentPageIndex = Convert.ToInt32(ViewState["PageNumber"]);
    }
    else
    {
        pageds.CurrentPageIndex = 0;
    }
    if (pageds.PageCount > 1)
    {
        rptPaging.Visible = true;
        ArrayList pages = new ArrayList();
        for (int i = 0; i < pageds.PageCount; i++)
        {
            pages.Add((i + 1).ToString());
        }
        rptPaging.DataSource = pages;
        rptPaging.DataBind();
    }
    else
    {
        rptPaging.Visible = false;
    }
    rptUserData.DataSource = pageds;
    rptUserData.DataBind();
}

VB.Net

Protected Property ActiveIndex As Integer
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.load
    If Not Me.IsPostBack Then
        Me.ActiveIndex = 1
        Me.BindRepeater()
    End If
End Sub

Protected Sub rptPaging_ItemCommand(ByVal source As Object, ByVal e As RepeaterCommandEventArgs)
    ViewState("PageNumber") = Convert.ToInt32(e.CommandArgument) - 1
    Me.ActiveIndex = Convert.ToInt32(e.CommandArgument)
    Me.BindRepeater()
End Sub

Private Sub BindRepeater()
    Dim ds As DataSet = New DataSet()
    ds.ReadXml(Server.MapPath("~/XMLFile.xml"))

    If ds IsNot Nothing AndAlso ds.HasChanges() Then
        rptUserData.DataSource = ds
        rptUserData.DataBind()
    Else
        rptUserData.DataBind()
    End If

    Dim dt As DataTable = ds.Tables(0)
    Dim pageds As PagedDataSource = New PagedDataSource()
    Dim dv As DataView = New DataView(dt)
    pageds.DataSource = dv
    pageds.AllowPaging = True
    pageds.PageSize = 6

    If ViewState("PageNumber") IsNot Nothing Then
        pageds.CurrentPageIndex = Convert.ToInt32(ViewState("PageNumber"))
    Else
        pageds.CurrentPageIndex = 0
    End If

    If pageds.PageCount > 1 Then
        rptPaging.Visible = True
        Dim pages As ArrayList = New ArrayList()

        For i As Integer = 0 To pageds.PageCount - 1
            pages.Add((i + 1).ToString())
        Next

        rptPaging.DataSource = pages
        rptPaging.DataBind()
    Else
        rptPaging.Visible = False
    End If

    rptUserData.DataSource = pageds
    rptUserData.DataBind()
End Sub

Screenshot