AJAX asp Web Forms在网格中的搜索

Question

我发现我的问题在一个方面的实现，但我不知道为什么它不工作。当我将一些值放入textbox时，它应该做一个回发，但它没有。

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="txt" />
                </Triggers>
                <ContentTemplate>
                    <asp:TextBox runat="server" ID="TextBox1" AutoPostBack="true" OnTextChanged="txt_TextChanged"></asp:TextBox>
                    <asp:GridView runat="server" ID="GridView2">
                        <Columns>
                            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" ItemStyle-Font-Size="10px" />
                            <asp:BoundField DataField="regon" HeaderText="Regon" SortExpression="regon" ItemStyle-Font-Size="10px" />
                            <asp:BoundField DataField="nip" HeaderText="NIP" SortExpression="nip" ItemStyle-Font-Size="10px" />
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

和代码背后：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
             txt.Attributes.Add("onkeyup", "javascript:setTimeout('__doPostBack(\'txt\',\'\')', 0)");
             string SelectCommand = "SELECT * " +
                 "  FROM client_inf WHERE amount > 1000";
             conn.Open();
             OleDbDataAdapter da = new OleDbDataAdapter(SelectCommand, conn);
             DataSet ds = new DataSet();
             da.Fill(ds);
             GridView1.DataSource = ds.Tables[0];
             GridView1.DataBind();
             conn.Close();
        }
    }
     protected void txt_TextChanged(object sender, EventArgs e)
    {
        if (txt.Text != "")
        {
            string SelectCommand = "SELECT * " +
                 "  FROM client_inf WHERE client_name Like '" + txt.Text + "%'"
             conn.Open();
             OleDbDataAdapter da = new OleDbDataAdapter(SelectCommand, conn);
             DataSet ds = new DataSet();
            da.Fill(ds);
            GridView1.DataSource = ds.Tables[0];
            GridView1.DataBind();
            conn.Close();
        }
    }

http://www.infosearchshop.com/21-gridview-search-as-you-type-with-ajax

Answer 1

TextBox的id和GridView的ID不匹配。

<div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="txt" />
                </Triggers>
                <ContentTemplate>
                    <asp:TextBox runat="server" ID="txt" AutoPostBack="true" OnTextChanged="txt_TextChanged"></asp:TextBox>
                    <asp:GridView runat="server" ID="GridView1">
                        <Columns>
                            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" ItemStyle-Font-Size="10px" />
                            <asp:BoundField DataField="regon" HeaderText="Regon" SortExpression="regon" ItemStyle-Font-Size="10px" />
                            <asp:BoundField DataField="nip" HeaderText="NIP" SortExpression="nip" ItemStyle-Font-Size="10px" />
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

aspx.cs

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                txt.Attributes.Add("onkeyup", "javascript:setTimeout('__doPostBack(\'txt\',\'\')', 0)");
                GridView1.DataSource = GetDataSource();
                GridView1.DataBind();
            }
        }
        private DataTable GetDataSource()
        {
            var dt = new DataTable();
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("regon", typeof(string));
            dt.Columns.Add("nip", typeof(string));
            dt.Rows.Add("Name-1", "regon-1", "nip-1");
            dt.Rows.Add("Name-2", "regon-1", "nip-1");
            dt.Rows.Add("Name-3", "regon-1", "nip-1");
            dt.Rows.Add("Name-4", "regon-1", "nip-1");
            dt.Rows.Add("Name-5", "regon-1", "nip-1");
            dt.Rows.Add("Name-6", "regon-1", "nip-1");
            dt.Rows.Add("Name-7", "regon-1", "nip-1");
            return dt;
        }
        protected void txt_TextChanged(object sender, EventArgs e)
        {
            if (txt.Text != "")
            {
                GridView1.DataSource = GetDataSource();
                GridView1.DataBind();
            }
        }

Answer 2

我建议按如下方式更新AsyncPostBackTrigger，以将textbox = TextBox1的ID与AutoPostBack引用相匹配，但控件需要位于UpdatePanel之外

<asp:AsyncPostBackTrigger ControlID ="TextBox1" EventName ="TextChanged" />

我还建议尝试使用PostBackTrigger。这主要用于执行完整回发的UpdatePanel内的控件

<asp:PostBackTrigger ControlID="TextBox1" />