locked
why i lost filtered results after change datapager index RRS feed

  • Question

  • User593933095 posted

    Look in Gif and see the problem , when i type in textbox and search the result is fine after i click for other page the search condition lost

    head

    <title></title>
    <link href="App_Themes/Theme1/CSS/Usual.css" rel="stylesheet" />
    <link href="Table.css" rel="stylesheet" />
    <style>
        body
        {
            font-family: Poppins !important
        }
    
        input
        {
            font: unset !important
        }
    </style>
    <script>
        function UpdatePanel() {
            __doPostBack("<%=TextBox1.ClientID%>", '')
        }
    </script>
    <link href="App_Themes/Theme1/CSS/Bootstrap.css" rel="stylesheet" />

    body

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="table-b">
            <div class="row d-flex justify-content-center">
                <div class="col-md-6">
                    <div class="tables">
                        <div class="table-search">
                            <asp:TextBox AutoCompleteType="None" ID="TextBox1" onkeyup="UpdatePanel()" AutoPostBack="false" OnTextChanged="TextBox1_TextChanged" CssClass="key" runat="server" placeholder="Search"></asp:TextBox>
                            <div class="line-1"></div>
                            <div class="line-0"></div>
                        </div>
                        <asp:UpdatePanel ID="UpdatePanel1" RenderMode="Block" UpdateMode="Conditional" runat="server">
                            <ContentTemplate>
                                <asp:ListView  ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="product_id">
                                    <ItemTemplate>
                                        <tr style="">
                                            <td>
                                                <asp:Label Text='<%# Eval("product_id") %>' runat="server" ID="product_idLabel" />
                                            </td>
                                            <td>
                                                <asp:Label Text='<%# Eval("product_name") %>' runat="server" ID="product_nameLabel" />
                                            </td>
    
                                            <td>
                                                <asp:Label Text='<%# Convert.ToInt32(Eval("list_price")).ToString("N0") %>' runat="server" ID="list_priceLabel" />
                                            </td>
                                        </tr>
                                    </ItemTemplate>
                                    <LayoutTemplate>
                                        <table runat="server" style="width: 100%; text-align: right">
                                            <tr runat="server" class="thead">
                                                <th runat="server">id</th>
                                                <th runat="server">name</th>
                                                <th runat="server">price</th>
                                            </tr>
                                            <tr runat="server" id="itemPlaceholder"></tr>
                                            <tr runat="server">
                                                <td runat="server" style="">
                                                    <asp:DataPager runat="server" ID="DataPager1">
                                                        <Fields>
                                                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                                                            <asp:NumericPagerField></asp:NumericPagerField>
                                                            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                                                        </Fields>
                                                    </asp:DataPager>
                                                </td>
                                            </tr>
                                        </table>
                                    </LayoutTemplate>
                                </asp:ListView>
                                <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:ProductConnectionString %>' SelectCommand="SELECT product_name, product_id, list_price FROM production.products"></asp:SqlDataSource>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
        </div>
    
    </form>

    code behind

     protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products where product_name like '%" + TextBox1.Text + "%'";
        SqlDataSource1.DataBind();
        ListView1.DataBind();
    }

    Tuesday, August 25, 2020 9:20 PM

Answers

  • User409696431 posted

    When you change pages, the ListView is rebound to its datasource.  The DataPager then determines which results are shown.

    When you filter, you are changing the Select command in code behind, but that does not change the fact that the original Select is hard coded in the page.  When the page reloads for the DataPager, that Select is used.

    Look into the ListView's PagePropertiesChanging event.  Wire it up, and in this event,  if TextBox1.Text is not null or empty, modify the Select as you do in your filtering code, and rebind ListView1.

    In the page add the new event to the ListView:

     <asp:ListView  ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="product_id" OnPagePropertiesChanging="ListView1_PagePropertiesChanging">

    In Code behind handle adding the filter criteria:

    protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
        {
            if(!String.IsNullOrEmpty(TextBox1.Text) & !String.IsNullOrWhiteSpace(TextBox1.Text))
            {
        		SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products where product_name like '%" + TextBox1.Text + "%'";
        		SqlDataSource1.DataBind();
        		ListView1.DataBind();
            }
        }
    

    Also, your TextBox changed event should test for non-blank, non-null entries, too, to handle the case where the user clears the filter box:

     protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
    if (!String.IsNullOrEmpty(TextBox1.Text) & !String.IsNullOrWhiteSpace(TextBox1.Text))
            {
        SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products where product_name like '%" + TextBox1.Text + "%'";
        SqlDataSource1.DataBind();
        ListView1.DataBind();
    }
    else
    {
        SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products";
        SqlDataSource1.DataBind();
        ListView1.DataBind();
    }
    
    }

    And, finally, in production, you should not take TextBox entries from a user without validating them, and should use parametrized queries, not appending textbox values to the query string.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 26, 2020 3:44 AM
  • User1535942433 posted

    Hi rezaelahi,

    Accroding to your description and codes,I have created a test and I have the same error with you.

    As far as I think,you could PagePropertiesChanging event to select the  filter condition and bind the data again.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
    
        <style>
            body {
                font-family: Poppins !important
            }
    
            input {
                font: unset !important
            }
        </style>
        <script>
            function UpdatePanel() {
                __doPostBack("<%=TextBox1.ClientID%>", '')
            }
        </script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div class="table-b">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-6">
                        <div class="tables">
                            <div class="table-search">
                                <asp:TextBox AutoCompleteType="None" ID="TextBox1" onkeyup="UpdatePanel()" AutoPostBack="false" OnTextChanged="TextBox1_TextChanged" CssClass="key" runat="server" placeholder="Search"></asp:TextBox>
                                <div class="line-1"></div>
                                <div class="line-0"></div>
    
                            </div>
                            <asp:UpdatePanel ID="UpdatePanel1" RenderMode="Block" UpdateMode="Conditional" runat="server">
                                <ContentTemplate>
                                    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="product_id" OnPagePropertiesChanging="ListView1_PagePropertiesChanging">
                                        <ItemTemplate>
                                            <tr style="">
                                                <td>
                                                    <asp:Label Text='<%# Eval("product_id") %>' runat="server" ID="product_idLabel" />
                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("product_name") %>' runat="server" ID="product_nameLabel" />
                                                </td>
    
                                                <td>
                                                    <asp:Label Text='<%# Convert.ToInt32(Eval("list_price")).ToString("N0") %>' runat="server" ID="list_priceLabel" />
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                        <LayoutTemplate>
                                            <table runat="server" style="width: 100%; text-align: right">
                                                <tr runat="server" class="thead">
                                                    <th runat="server">id</th>
                                                    <th runat="server">name</th>
                                                    <th runat="server">price</th>
                                                </tr>
                                                <tr runat="server" id="itemPlaceholder"></tr>
                                                <tr runat="server">
                                                    <td runat="server" style="">
                                                        <asp:DataPager runat="server" ID="DataPager1" PageSize="5">
                                                            <Fields>
                                                                <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                                                                <asp:NumericPagerField></asp:NumericPagerField>
                                                                <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                                                            </Fields>
                                                        </asp:DataPager>
                                                    </td>
                                                </tr>
                                            </table>
                                        </LayoutTemplate>
                                    </asp:ListView>
                                    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:aspnet-TestApplicationWithDatabase-20190820030542 %>' SelectCommand="SELECT * FROM [Total]"></asp:SqlDataSource>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
    
    
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    Code-Behind:

    protected void TextBox1_TextChanged(object sender, EventArgs e)
            {
                SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM Total where product_name like '%" + TextBox1.Text + "%'";
                SqlDataSource1.DataBind();
                ListView1.DataBind();
            }
    
            protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
            {
                (ListView1.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
                SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM Total where product_name like '%" + TextBox1.Text + "%'";
                SqlDataSource1.DataBind();
                ListView1.DataBind();
            }

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 26, 2020 5:36 AM

All replies

  • User409696431 posted

    When you change pages, the ListView is rebound to its datasource.  The DataPager then determines which results are shown.

    When you filter, you are changing the Select command in code behind, but that does not change the fact that the original Select is hard coded in the page.  When the page reloads for the DataPager, that Select is used.

    Look into the ListView's PagePropertiesChanging event.  Wire it up, and in this event,  if TextBox1.Text is not null or empty, modify the Select as you do in your filtering code, and rebind ListView1.

    In the page add the new event to the ListView:

     <asp:ListView  ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="product_id" OnPagePropertiesChanging="ListView1_PagePropertiesChanging">

    In Code behind handle adding the filter criteria:

    protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
        {
            if(!String.IsNullOrEmpty(TextBox1.Text) & !String.IsNullOrWhiteSpace(TextBox1.Text))
            {
        		SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products where product_name like '%" + TextBox1.Text + "%'";
        		SqlDataSource1.DataBind();
        		ListView1.DataBind();
            }
        }
    

    Also, your TextBox changed event should test for non-blank, non-null entries, too, to handle the case where the user clears the filter box:

     protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
    if (!String.IsNullOrEmpty(TextBox1.Text) & !String.IsNullOrWhiteSpace(TextBox1.Text))
            {
        SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products where product_name like '%" + TextBox1.Text + "%'";
        SqlDataSource1.DataBind();
        ListView1.DataBind();
    }
    else
    {
        SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products";
        SqlDataSource1.DataBind();
        ListView1.DataBind();
    }
    
    }

    And, finally, in production, you should not take TextBox entries from a user without validating them, and should use parametrized queries, not appending textbox values to the query string.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 26, 2020 3:44 AM
  • User1535942433 posted

    Hi rezaelahi,

    Accroding to your description and codes,I have created a test and I have the same error with you.

    As far as I think,you could PagePropertiesChanging event to select the  filter condition and bind the data again.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
    
        <style>
            body {
                font-family: Poppins !important
            }
    
            input {
                font: unset !important
            }
        </style>
        <script>
            function UpdatePanel() {
                __doPostBack("<%=TextBox1.ClientID%>", '')
            }
        </script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div class="table-b">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-6">
                        <div class="tables">
                            <div class="table-search">
                                <asp:TextBox AutoCompleteType="None" ID="TextBox1" onkeyup="UpdatePanel()" AutoPostBack="false" OnTextChanged="TextBox1_TextChanged" CssClass="key" runat="server" placeholder="Search"></asp:TextBox>
                                <div class="line-1"></div>
                                <div class="line-0"></div>
    
                            </div>
                            <asp:UpdatePanel ID="UpdatePanel1" RenderMode="Block" UpdateMode="Conditional" runat="server">
                                <ContentTemplate>
                                    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="product_id" OnPagePropertiesChanging="ListView1_PagePropertiesChanging">
                                        <ItemTemplate>
                                            <tr style="">
                                                <td>
                                                    <asp:Label Text='<%# Eval("product_id") %>' runat="server" ID="product_idLabel" />
                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("product_name") %>' runat="server" ID="product_nameLabel" />
                                                </td>
    
                                                <td>
                                                    <asp:Label Text='<%# Convert.ToInt32(Eval("list_price")).ToString("N0") %>' runat="server" ID="list_priceLabel" />
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                        <LayoutTemplate>
                                            <table runat="server" style="width: 100%; text-align: right">
                                                <tr runat="server" class="thead">
                                                    <th runat="server">id</th>
                                                    <th runat="server">name</th>
                                                    <th runat="server">price</th>
                                                </tr>
                                                <tr runat="server" id="itemPlaceholder"></tr>
                                                <tr runat="server">
                                                    <td runat="server" style="">
                                                        <asp:DataPager runat="server" ID="DataPager1" PageSize="5">
                                                            <Fields>
                                                                <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                                                                <asp:NumericPagerField></asp:NumericPagerField>
                                                                <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                                                            </Fields>
                                                        </asp:DataPager>
                                                    </td>
                                                </tr>
                                            </table>
                                        </LayoutTemplate>
                                    </asp:ListView>
                                    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:aspnet-TestApplicationWithDatabase-20190820030542 %>' SelectCommand="SELECT * FROM [Total]"></asp:SqlDataSource>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
    
    
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    Code-Behind:

    protected void TextBox1_TextChanged(object sender, EventArgs e)
            {
                SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM Total where product_name like '%" + TextBox1.Text + "%'";
                SqlDataSource1.DataBind();
                ListView1.DataBind();
            }
    
            protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
            {
                (ListView1.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
                SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM Total where product_name like '%" + TextBox1.Text + "%'";
                SqlDataSource1.DataBind();
                ListView1.DataBind();
            }

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 26, 2020 5:36 AM