Search code examples
c#asp.netpaginationrepeater

ASP.NET Paging next page button does not work properly


I'am trying to divide all of my products that i listed by using a repeater to pages. For example there are 3 pages. The paging looks well but when i click to next page button it is going to page 4 which is not exist actually. What can be the reason ? Implementation is below.

    private void showShoes() 
    {
        dataInThePage = new PagedDataSource()
        {
            DataSource = ap.getShoes(),
            AllowPaging = true,
            PageSize = 2,
            CurrentPageIndex = pageNo
        };

        shoeRepeater.DataSource = dataInThePage;
        shoeRepeater.DataBind();

        pageAmount = dataInThePage.PageCount - 1;
        //
        pageInfoLabel.Text = "Page: " + (dataInThePage.CurrentPageIndex + 1) + "/" + dataInThePage.PageCount + " - Number of Shoes: " + (dataInThePage.DataSourceCount);
        //
        previousButton.Enabled = !dataInThePage.IsFirstPage;
        nextButton.Enabled = !dataInThePage.IsLastPage;
    }

    private int pageNo
    {
        get
        {
            if (ViewState["pageNumber"] != null)
                return Convert.ToInt32(ViewState["pageNumber"]);
            return 0;
        }
        set
        {
            ViewState["pageNumber"] = value;
        }
    }
    private int pageAmount
    {
        get
        {
            if (ViewState["pageNumber"] != null)
                return Convert.ToInt32(ViewState["pageNumber"]);
            return 0;
        }
        set { ViewState["pageNumber"] = value; }
    }
    public PagedDataSource dataInThePage { get; set; }

    protected void previousButton_Click(object sender, EventArgs e)
    {
        pageNo -= 1;
        showShoes();
    }

    protected void nextButton_Click(object sender, EventArgs e)
    {
            pageNo += 1;
            showShoes();
    }

Front-end:

                <ajaxToolkit:TabPanel ID="TabPanel5" runat="server">
                <HeaderTemplate>Show Shoes</HeaderTemplate>
                <ContentTemplate runat="server">                                                               
                    <asp:Repeater ID="shoeRepeater" runat="server">
                        <HeaderTemplate></HeaderTemplate>
                        <ItemTemplate>
                            <table border="1" style="border-color:#ff9900; width:400px; font-weight:bold; font-family:'Oswald', Arial, sans-serif;">
                                <tr>
                                    <td rowspan="6" style="width:150px; height:150px;">
                                        <image src="shoeImages/<%#DataBinder.Eval(Container.DataItem,"ImagePath") %>"></image>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <%#DataBinder.Eval(Container.DataItem,"BrandName") %> - <%#DataBinder.Eval(Container.DataItem,"ModelName") %> 
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        Price: $<%#DataBinder.Eval(Container.DataItem,"Price") %>
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        Size: <%#DataBinder.Eval(Container.DataItem,"Size") %>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Color: <%#DataBinder.Eval(Container.DataItem,"PrimaryColor") %> - <%#DataBinder.Eval(Container.DataItem,"SecondaryColor") %> 
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Quantity: <%#DataBinder.Eval(Container.DataItem,"Quantity") %>
                                    </td>

                                </tr>
                            </table>
                        </ItemTemplate>
                        <FooterTemplate></FooterTemplate>
                    </asp:Repeater>
                    <div style="width:600px; height:20px;">
                        <div style="width:50px; height:100%; float:left">
                            <asp:Button ID="previousButton" runat="server" OnClick="previousButton_Click" Text="<<" Width="50px"/>
                        </div>
                        <div style="width:500px; height:100%; float:left; text-align:center">
                            <asp:Label ID="pageInfoLabel" runat="server" Text=" "></asp:Label>
                        </div>
                        <div style="width:50px; height:100%; float:left">
                            <asp:Button ID="nextButton" runat="server" OnClick="nextButton_Click" Text=">>" Width="50px"/>
                        </div>
                    </div>
                </ContentTemplate>               
            </ajaxToolkit:TabPanel>

Solution

  • I had to guess on a number of things, but I was able to take the posted code and get it to work in VS 2010 using an ASP.NET 4.0 project.

    Here are the things I did to get it working:

    • Add a Shoe POCO with the 8 public properties referenced in the .aspx page (not shown)
    • Add a FakeShoeRepository class that has a private static List<Shoe> with 9 shoes (not shown)
    • Add a static method called getShoes() that returns a reference to the private member variable of the repository (not shown)
    • Set the dataInThePage.DataSource = FakeShoeRepository.getShoes() (not shown)
    • Add a Page_Load() event

      protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
          {
              pageNo = 0;
              showShoes();
          }
      }
      
    • Remove the pageAmount property

    • Remove the one place pageAmount was being set in the showShoes() method (this was effectively setting ViewState["pageNumber"] = PageCount - 1)

    The last two items are where the actual problem was in the provided code.