在文本框上绑定gridview onkeypress

时间:2018-12-05 16:48:01

标签: javascript c# asp.net

所以我已经有了一个基于OnTextChanged事件在文本框中键入的数字进行更新的gridview。问题是,只有在文本框失去控制时,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>

但是它执行了我想要的操作,它现在显示基于键入键上的数字的行数,而不是通过单击文本框来进行更新,但是仍然存在问题,仅按了一个键后,文本框就会失去焦点即使我试图以编程方式设置焦点也无法正常工作,或者将光标设置在先前键入的数字后面

2 个答案:

答案 0 :(得分:0)

我不确定您为什么要这样处理,但我想您可以:

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

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

答案 1 :(得分:0)

您可以将自定义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,则会出现无用的回发。