Paging in Entity Framework

tommein · October 19th, 2013, 06:33 AM

I have a small database of car images sorted by car size, small car, medium car, large car, using a dropdownlist
The images are displayed, also showing how many images there are in the paging section, in this case 4 small, 7 medium and 3 large.
The problem I have is that if I click on, say, image number 4 in the small cars and then choose large cars from the dropdownlist, then nothing is displayed.
Obviously it is still showing page 4 but there is no number 4 image in large cars.
How can I force it to show the first image from each selection of images?

Thank you

Imar · October 19th, 2013, 01:55 PM

Hi there,

It's hard to recommend a concrete solution since you didn't post any code. However, in general you handle the SelectedIndexChanged event of the drop down and then reset the current page on whatever control you're using to display the pictures.

Hope this helps,

Imar

tommein · October 19th, 2013, 02:28 PM

Code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

         <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="EntityDataSource2" AppendDataBoundItems="true" AutoPostBack="true" DataTextField="Size" DataValueField="Size" CssClass="CarPicker_Ddl">
            <asp:ListItem Value="Small">Choose Car Size</asp:ListItem>
         </asp:DropDownList>
         <asp:EntityDataSource ID="EntityDataSource2" runat="server" ConnectionString="name=CarHireEntities" DefaultContainerName="CarHireEntities" 
         EnableFlattening="False" EntitySetName="cars" Select="it.[Size]" GroupBy="it.[Size]" >
         </asp:EntityDataSource>  
          

         <asp:FormView ID="FormView1" runat="server" DataSourceID="EntityDataSource1" AllowPaging="true">
                <ItemTemplate>
                <div class="row">
                <div class="col-md-6 pull-right"> 
                <div class="ImageBox img-responsive">
                    <asp:Image ID="CarImage" runat="server" ImageUrl='<%# Bind("ImageLarge") %>' />
                </div>
                </div> <%--End Col MD 6--%>

                <div class="col-md-6">
                <div class="hireData">
                <ul>
                    <li>  
                        <p>Maker:</p>
                        <asp:Label ID="MakerLabel" runat="server" Text='<%# Bind("Maker") %>' />
                    </li>
                    <li>
                        <p>Model:</p>
                        <asp:Label ID="ModelLabel" runat="server" Text='<%# Bind("Model") %>' />
                    </li>
                    <li>
                        <p>Automatic:</p>
                        <asp:Label ID="AutomaticLabel" runat="server" Text='<%# Bind("Automatic") %>' />
                    </li>
                    <li>
                        <p>Low Season</p>
                        <asp:Label ID="PriceLowSeasonLabel" runat="server" Text='<%# Bind("PriceLowSeason") %>' /><asp:Label
                            ID="Label1" runat="server" Text=" Euro"></asp:Label>
                    </li>
                    <li>
                        <p>High Season</p>
                        <asp:Label ID="PriceHighSeasonLabel" runat="server" Text='<%# Bind("PriceHighSeason") %>' /><asp:Label
                            ID="Label2" runat="server" Text=" Euro"></asp:Label>
                    </li>
                </ul>
                    
                </div> <%--End Hire Data--%>
                </div> <%--End MD 6--%>
                </div> <%--End Row--%>
                </ItemTemplate>
                
                
                               
           </asp:FormView>

             

        <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
            ConnectionString="name=CarHireEntities" DefaultContainerName="CarHireEntities" 
            EnableFlattening="True" EntitySetName="cars" OrderBy="it.[Size]" Where="it.Size=@Size" 
            Select="it.[CarID], it.[Header], it.[Maker], it.[Model], it.[Automatic], it.[Seating], it.[Size], it.[ImageSmall], it.[ImageLarge], it.[PriceLowSeason], it.[PriceHighSeason], it.[Description]">
            <SelectParameters>
            <asp:ControlParameter ControlID="DropDownList1" Name="Size" PropertyName="SelectedValue" Type="String" />
            </SelectParameters>
        </asp:EntityDataSource>

       
    </ContentTemplate>
    </asp:UpdatePanel>

I tried using an SqlDataSource in place of the EntityDataSource and it worked fine as I assume that the SqlDataSource is constantly connected as opposed to the EntityDataSource??

Imar · October 19th, 2013, 03:28 PM

>> as I assume that the SqlDataSource is constantly connected as opposed to the EntityDataSource??

No, both controls just connect to the database when they need data, and then disconnect.

Have you tried following my advise by resetting the PageIndex? http://msdn.microsoft.com/en-us/libr...pageindex.aspx

Imar

tommein · October 20th, 2013, 09:20 AM

I followed that link and set up my page as follows:-

Code:

<asp:FormView ID="FormView1" runat="server" DataSourceID="EntityDataSource1" AllowPaging="true" OnDataBound="FormView1_DataBound">
                <ItemTemplate>
                <div class="row">
                <div class="col-md-6 pull-right"> 
                <div class="ImageBox img-responsive">
                    <asp:Image ID="CarImage" runat="server" ImageUrl='<%# Bind("ImageLarge") %>' />
                </div>
                </div> <%--End Col MD 6--%>

                <div class="col-md-6">
                <div class="hireData">
                <ul>
                    <li>  
                        <p>Maker:</p>
                        <asp:Label ID="MakerLabel" runat="server" Text='<%# Bind("Maker") %>' />
                    </li>
                    <li>
                        <p>Model:</p>
                        <asp:Label ID="ModelLabel" runat="server" Text='<%# Bind("Model") %>' />
                    </li>
                    <li>
                        <p>Automatic:</p>
                        <asp:Label ID="AutomaticLabel" runat="server" Text='<%# Bind("Automatic") %>' />
                    </li>
                    <li>
                        <p>Low Season</p>
                        <asp:Label ID="PriceLowSeasonLabel" runat="server" Text='<%# Bind("PriceLowSeason") %>' /><asp:Label
                            ID="Label1" runat="server" Text=" Euro"></asp:Label>
                    </li>
                    <li>
                        <p>High Season</p>
                        <asp:Label ID="PriceHighSeasonLabel" runat="server" Text='<%# Bind("PriceHighSeason") %>' /><asp:Label
                            ID="Label2" runat="server" Text=" Euro"></asp:Label>
                    </li>
                </ul>
                    
                </div> <%--End Hire Data--%>
                </div> <%--End MD 6--%>
                </div> <%--End Row--%>
                </ItemTemplate>

                <PagerTemplate>
                    <table style="width:100%">
                        <tr>
                            <td>
                                <asp:LinkButton ID="PreviousButton" Text="<" CommandName="Page" CommandArgument="Prev" runat="server"></asp:LinkButton>
                                <asp:LinkButton ID="NextButton" Text=">" CommandName="Page" CommandArgument="Next" runat="server"></asp:LinkButton>
                            </td>
                            <td style="text-align:right">
                                Car <asp:Label ID="PageNumberLabel" runat="server"></asp:Label>
                                of <asp:Label ID="TotalPagesLabel" runat="server"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </PagerTemplate>
                <PagerSettings Position="Bottom" Mode="NextPrevious" />
                
                               
           </asp:FormView>

             

        <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
            ConnectionString="name=CarHireEntities" DefaultContainerName="CarHireEntities" 
            EnableFlattening="True" EntitySetName="cars" OrderBy="it.[Size]" Where="it.Size=@Size" 
            Select="it.[CarID], it.[Header], it.[Maker], it.[Model], it.[Automatic], it.[Seating], it.[Size], it.[ImageSmall], it.[ImageLarge], it.[PriceLowSeason], it.[PriceHighSeason], it.[Description]">
            <SelectParameters>
            <asp:ControlParameter ControlID="DropDownList1" Name="Size" PropertyName="SelectedValue" Type="String" />
            </SelectParameters>
        </asp:EntityDataSource>

and then my code behind:-

Code:

 public void FormView1_DataBound(Object sender, EventArgs e)
    {
        FormViewRow pagerRow = FormView1.BottomPagerRow;

        Label pageNum = (Label)pagerRow.Cells[0].FindControl("PageNumberLabel");
        Label totalNum = (Label)pagerRow.Cells[0].FindControl("TotalPagesLabel");

        if ((pageNum != null) && (totalNum != null))
        {
            int page = FormView1.PageIndex + 1;
            int count = FormView1.PageCount;

            pageNum.Text = page.ToString();
            totalNum.Text = count.ToString();
        }
    }

Now I have a < and > to navigate and Car 1 of 4, but when I navigate to Small car number 4 and then use the dropdownlist to go to Large Cars (where there is only 3) I get a blank page, i.e. the same problem.
Regards
Tom

tommein · October 20th, 2013, 01:02 PM

Looking at the OnPageIndexChanged on the FormView then setting up FormView1_IndexChanged, am I on the right track?

Imar · October 20th, 2013, 02:05 PM

You should handle the DropDownList's OnSelectedIndexChanged and set the PageIndex of the FormView to 0. That forces the control to display the data for the first page. You may also need to call FormView1.DataBind() from the same handler.

Imar

tommein · October 21st, 2013, 10:38 AM

Hi Imar
I have tried to implement what you suggested but have obviously done something wrong. My programming skills are not great and what I achieve tends to follow the saying "that even a blind chicken will find some corn :-)"
I have done the following:-

Code:

public void FormView1_DataBound(Object sender, EventArgs e)
    {
        FormViewRow pagerRow = FormView1.BottomPagerRow;

        Label pageNum = (Label)pagerRow.Cells[0].FindControl("PageNumberLabel");
        Label totalNum = (Label)pagerRow.Cells[0].FindControl("TotalPagesLabel");

        if ((pageNum != null) && (totalNum != null))
        {
            int page = FormView1.PageIndex + 1;
            int count = FormView1.PageCount;

            pageNum.Text = page.ToString();
            totalNum.Text = count.ToString();
        }

    }

    public void ddl_IndexChanged(Object sender, EventArgs e)
    {

        FormViewRow pagerRow = FormView1.BottomPagerRow;
        DropDownList ddList = (DropDownList)pagerRow.Cells[0].FindControl("DropDownList1");

        FormView1.PageIndex = ddList.SelectedIndex;
        FormView1.PageIndex = 0;
        FormView1.DataBind();
    }

Now the dropdownlist changes but does not select the different collection of images, i.e medium or large.
Could you point me in the right direction on how to solve this please.
I do appreciate the time that you have taken to help me solve this problem

Imar · October 21st, 2013, 03:24 PM

Hi there,

I don't see the DropDownList1 or ddl controls defined anywhere. Where are they? You're linking the EntityDataSource to it but that's it.

If everything works as expected and all you need to do is move to page one when you select a new item from the DropDownList, this should be enough:

public void ddl_SelectedIndexChanged(Object sender, EventArgs e)
{
FormView1.PageIndex = 0;
FormView1.DataBind();
}

assuming that:

1. ddl is a drop down list control define in your page but outside the FormView
2. You added OnSelectedIndexChanged="ddl_SelectedIndexChanged" to the control.

If that doesn't help, either post the full code, or better yet, make a stripped down version of the site with just the relevant pages and images and database (and nothing else so I don't have to wade through lots of irrelevant stuff) and I'll take a look.

Cheers,

Imar

tommein · October 22nd, 2013, 04:36 AM

That worked, big thank you for your time.
Really appreciate it.