Problem: Failed to load viewstate.

Question

I am making a web site for my college project. The project is website thats gets everything from web service. Can somebody tell whats going on, and how i fix it ?

On one of my pages i have ListView control to display product items, and Pager on same page. On the first time page renderes fine and everything is displayed. When i click on nextPage on Pager, its reload page but doesn't display second page, rather displays same data, if i push once more then i am gettin:

Failed to load viewstate.  The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request.  For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.

My products page i quiet simple:

<asp:ListView ID="lv_ProductList" runat="server" DataKeyNames="product_id">
        <LayoutTemplate>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            <br />
            <br />
            <asp:DataPager ID="pageTopics" runat="server" PageSize="8" PagedControlID="lv_ProductList" >
                <Fields>
                    <asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="true" ShowNextPageButton="false" ButtonCssClass="span" />
                    <asp:NumericPagerField />
                    <asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="false" ShowNextPageButton="true" ShowLastPageButton="false" />
                </Fields>
           </asp:DataPager>
        </LayoutTemplate>
        <ItemTemplate>
            <div class="item">
                <img src="images/pic_1.jpg" width="91" height="105" alt="iPod" class="left" />
                <h3><a href="http://www.justwebtemplates.com"&gt;&lt;%# Eval("product_name") %></a></h3>
                <p><%# Eval("product_desc").ToString().Substring(0,90) + "..." %> </p>
                <div><a href="http://www.freewebsitetemplates.com" class="details">details</a> <a href="http://www.freewebsitetemplates.com" class="addtocart">add to cart</a></div>
                <div class="divider"></div>
            </div>
        </ItemTemplate>
        <EmptyDataTemplate>No products found</EmptyDataTemplate>
        <EmptyItemTemplate>No products found</EmptyItemTemplate>
    </asp:ListView>

And in the code behind i have:

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


    public void getProductsList()
    {
        Store.Service myProducts = new Store.Service();
        var products = myProducts.getProductList();

        lv_ProductList.DataSource = products;
        lv_ProductList.DataBind();
    }

and on the web service:

[WebMethod]
    public List<ws_product> getProductList()
    {
        using (DataClassesDataContext myProducts = new DataClassesDataContext())
        {

            var productList = from p in myProducts.ws_products
                              select p;

            return productList.ToList();
        }

}

Can somebody tell whats going on ? Also if i take Pager outside the ListView, then i don't get error, however if i click on the nextpage link it displays same set of data.

How do i fix it ? Thank you in advance.

Answer 1

This isn't exactly my area of expertise, but I may be able to provide some conceptual guidance.

Although you have put a pager control on your page, you have not implemented paging in your codebehind or your service.

Your service is going to need to accept index and length parameters, so the browser can say "I'm now on item 20 and I'm looking at 10 at a time, so now go to the db and send back items 30-39."

Your service must actually support the paging. Alternatively, you could load all items into the page once and use a jQuery-like library to do "virtual" paging, instead of posting back, but I imagine that is outside the scope of your school project.

Answer 2

Jay, thank you for trying to help.

After breaking my head on the wall for while, i ended up building custom pager for my ListView. Now everything is working.

Answer 3

On your code behind add:

protected void lds_Selecting(object sender, LinqDataSourceSelectEventArgs args)
{
        Store.Service myProducts = new Store.Service();  
        args.Result  = myProducts.getProductList();     
}

Add asp:LinqDataSource to the page:

  <asp:LinqDataSource ID="lds" runat="server" OnSelecting="lds_Selecting" />


    <asp:ListView ID="lv_ProductList" runat="server" 
DataKeyNames="product_id"   DataSourceID="lds">   
            <LayoutTemplate>   
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />   
                <br />   
                <br />   
                <asp:DataPager ID="pageTopics" runat="server" PageSize="8" PagedControlID="lv_ProductList" >   
                    <Fields>   
                        <asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="true" ShowNextPageButton="false" ButtonCssClass="span" />   
                        <asp:NumericPagerField />   
                        <asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="false" ShowNextPageButton="true" ShowLastPageButton="false" />   
                    </Fields>   
               </asp:DataPager>   
            </LayoutTemplate>   
            <ItemTemplate>   
                <div class="item">   
                    <img src="images/pic_1.jpg" width="91" height="105" alt="iPod" class="left" />   
                    <h3><a href="http://www.justwebtemplates.com"&gt;&lt;%# Eval("product_name") %></a></h3>   
                    <p><%# Eval("product_desc").ToString().Substring(0,90) + "..." %> </p>   
                    <div><a href="http://www.freewebsitetemplates.com" class="details">details</a> <a href="http://www.freewebsitetemplates.com" class="addtocart">add to cart</a></div>   
                    <div class="divider"></div>   
                </div>   
            </ItemTemplate>   
            <EmptyDataTemplate>No products found</EmptyDataTemplate>   
            <EmptyItemTemplate>No products found</EmptyItemTemplate>   
        </asp:ListView> 

this should work.