在文本框上绑定gridview onkeypress

Question

所以我已经有了一个基于在文本框中输入的数字和 OnTextChanged 事件更新的网格视图。问题是gridview仅在文本框失去控制时更新，我希望它在根据输入的数字按下键时绑定数据。我已经尝试过对 Web 方法的 ajax 调用或从 javascript 调用函数背后的代码，但都没有成功

这是我的输入文本框

<asp:UpdatePanel runat="server" ID="upNumComps" UpdateMode="Conditional">
    <ContentTemplate>
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblNumComps" runat="server" Text="Nº de Componentes " ForeColor="#142658" Style="font-weight: bold;"></asp:Label><span style="color: red; margin-right: 5px;"> * </span>
                </td>
                <td>
                    <asp:TextBox ID="txtNumComps" runat="server" AutoPostBack="True" OnTextChanged="txtNumComps_TextChanged"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvNumComps" runat="server" ForeColor="red" ControlToValidate="txtNumComps" ErrorMessage=""></asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

gridview 在这里

<asp:UpdatePanel ID="upDetComps" CssClass="mGrid1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="grvComponentes" runat="server" AutoGenerateColumns="False" ForeColor="#001f3f" GridLines="None" Style="text-align: center;">
            <Columns>
                <asp:TemplateField HeaderText="Nº" ItemStyle-HorizontalAlign="Center">

                    <ItemTemplate>
                        <asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" Style="margin-left: 10px; margin-right: 10px;" />
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Componente">
                    <ItemTemplate>
                        <asp:TextBox ID="txtComponente" runat="server" Style="margin-left: 10px; margin-right: 10px; margin-top: 5px;"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvComponente" ForeColor="red" runat="server" ControlToValidate="txtComponente" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Base">
                    <ItemTemplate>
                        <asp:TextBox ID="txtBase" runat="server" Style="margin-left: 10px; margin-right: 10px; margin-top: 5px;"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvBase" ForeColor="red" runat="server" ControlToValidate="txtBase" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Comprimento">
                    <ItemTemplate>

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

                                <asp:TextBox ID="txtComprimento" runat="server" AutoPostBack="true" OnTextChanged="txtComprimento_TextChanged" Style="margin-left: 10px; margin-right: 10px; margin-top: 5px;"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rfvComprimento" ForeColor="red" runat="server" ControlToValidate="txtComprimento" ErrorMessage="*"></asp:RequiredFieldValidator>

                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="txtComprimento" EventName="TextChanged" />
                            </Triggers>
                        </asp:UpdatePanel>

                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

函数背后的代码

protected void txtNumComps_TextChanged(object sender, EventArgs e)
{
    string rowCount = "";
    if (!CheckInt(txtNumComps.Text) || txtNumComps.Text == "0")
    {
        txtNumComps.Text = "";
        txtNumComps.Attributes.Add("placeholder", "Insira um número");
        rowCount = "0";
        ViewState["rowCount"] = rowCount;
        grvComponentesBind();
    }
    else if (CheckInt(txtNumComps.Text) && txtNumComps.Text != "0")
    {
        rowCount = txtNumComps.Text;
        ViewState["rowCount"] = rowCount;
        grvComponentesBind();
    }
}

编辑

这是我迄今为止所管理的更新。

我已经添加了这个javascript函数

 <script type="text/javascript">
    function RefreshUpdatePanel(id) {
        debugger
        __doPostBack(id, '');
        document.getElementById(id).blur(id);
        document.getElementById(id).focus(id);
    };
</script>

在文本框上我已更改为这个

<asp:TextBox ID="txtNumComps" runat="server" onkeyup="RefreshUpdatePanel(this.id);" OnTextChanged="txtNumComps_TextChanged"></asp:TextBox>

但是它做了我想做的事，它现在显示基于在键上键入的数字的行数，而不是通过单击文本框进行更新，但仍然存在问题，文本框在按下一个键后失去焦点即使我尝试以编程方式设置焦点，它也不起作用，或者将光标设置在之前输入的数字后面

Answer 1

我不确定你为什么要这样处理，但我想你可以这样做：

txtNumComps.Attributes.Add("onKeyUp", "document.Form1.submit();");

这会激怒大多数用户 imo...

Answer 2

您可以将自定义 keyup 事件绑定到该文本框。在该事件中，将焦点设置到另一个元素，TextChanged 事件将触发。

<asp:TextBox ID="txtNumComps" runat="server" AutoPostBack="True" OnTextChanged="txtNumComps_TextChanged"></asp:TextBox>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= txtNumComps.ClientID %>').keyup(function () {
            $('#<%= TextBox1.ClientID %>').focus();
        });
    });
</script>

但是用这种方法，如果用户想输入12，就会有一个无用的PostBack。