javascript - 从隐藏的代码中过滤 TextBox 的 KeyPress 事件上的 GridView

Question

我有一个带有 KeyPressed 事件的 TextBox，我想使用 jquery/javascript 在该事件上过滤 GridView。

<asp:TextBox ID="txtSearch" runat="server" OnKeyPressed="txtSearch_KeyPressed()">
</asp:TextBox>

<script>
  function txtSearch_KeyPressed()
  {
      // gvBanquet is an ID of GridView and SearchBanquet method returns a DataTable
      gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
      gvBanquet.DataBind();
  }
</script>

请注意，GridView 绑定(bind)代码来自 .CS 文件:

gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();

不知道效果如何？它应该绑定(bind)在 TextBox 的按键上。

---

编辑: 我找到了一个解决方案服务器站点 OnTextChanged TextBox 事件，它在按 Enter 而不是按键后绑定(bind) GridView。

<asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged" 
    AutoPostBack="True" ></asp:TextBox>

protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

I don't want it with OnTextChanged event but I think it would work on keypressed event using JavaScript or jQuery so I don't know how to do?

---

更新:我已经尝试使用下面的 jQuery 代码在文本框中按下按键，但它也不起作用。

$(document).ready(function () {

    $('#txtSearch').on("keyup", function () {
        // could bind bind GridView here??
        e.preventDefault();
    })
})

注意:GridView 和 TextBox 都在 UpdatePanel 中。

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

  <div class="col-lg-4" style="padding-right:0px">
      <asp:TextBox ID="txtSearch" Width="100%" CssClass="form-control" placeholder="Search..." runat="server"></asp:TextBox>
      <input id="inpHide" type="hidden" runat="server" />
  </div>
</div>
<!-- /.col-lg-12 -->

  <div class="col-lg-12 table-responsive">
  <asp:GridView ID="gvBanquet" CssClass="table table-striped table-bordered table-hover" runat="server" 
      AutoGenerateColumns="false" OnRowCommand="gvBanquet_RowCommand" AllowPaging="True" PageSize="5" 
      EmptyDataText="No record found!" OnPageIndexChanging="gvBanquet_PageIndexChanging" ShowHeaderWhenEmpty="true"
      >
      <Columns>
          <asp:TemplateField HeaderText="Banquet Name">
              <ItemTemplate>
                  <asp:Label ID="lblID" runat="server" Visible="false" Text='<% #Eval("bqtID") %>'></asp:Label>
                  <asp:Label ID="lblName" runat="server" Text='<% #Eval("bqtName") %>' ></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="User Name">
              <ItemTemplate>
                  <asp:Label ID="lblUserName" runat="server" Text='<% #Eval("bqtUserName") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Type">
              <ItemTemplate>
                  <asp:Label ID="lblType" runat="server" Text='<% #Eval("bqtType") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Capacity">
              <ItemTemplate>
                  <asp:Label ID="lblCapacity" runat="server" Text='<% #Eval("bqtCapacity") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Password">
              <ItemTemplate>
                  <asp:Label ID="lblPassword" runat="server" Text='<% #Eval("bqtPassword") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Email">
              <ItemTemplate>
                  <asp:Label ID="lblEmail" runat="server" Text='<% #Eval("bqtEmail") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Phone">
              <ItemTemplate>
                  <asp:Label ID="lblPhone" runat="server" Text='<% #Eval("bqtPhone") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Cell No.">
              <ItemTemplate>
                  <asp:Label ID="lblContactNo" runat="server" Text='<% #Eval("bqtContactNo") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Location">
              <ItemTemplate>
                  <asp:Label ID="lblLocation" runat="server" Text='<% #Eval("bqtLocation") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField>
              <HeaderTemplate>
                  <center>Events</center>
              </HeaderTemplate>
              <ItemTemplate>
                  <asp:Button ID="btnStatus" runat="server" CssClass="btn btn-primary btn-sm" CommandName="Status" Text='<%# Eval("bqtStatus") %>' />
                  <asp:Button ID="btnEdiit" runat="server" CssClass="btn btn-danger btn-sm" CommandName="EditRow" Text="Edit" />
                  <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger btn-sm" CommandName="DeleteRow" Text="DELETE" />
              </ItemTemplate>
          </asp:TemplateField>
      </Columns>
      <HeaderStyle BackColor="#5cb85c" BorderColor="#4CAE4C" ForeColor="White"></HeaderStyle>
      <PagerStyle CssClass="pagination-ys" />
  </asp:GridView>
     <asp:Label ID="lblNoRecords" runat="server" Text="No Record Found!"></asp:Label>
    </div>
    <!-- /.col-lg-12 -->

    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

我希望这个解决方案能有所帮助，尽管它与您实际使用的方法有点不同。仔细执行以下操作，如果需要任何更改，请随时发表评论。您需要首先使用 jquery 的 CDN 库，如下部分所示:(以防万一人们还没有使用它)

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

在更新面板(包含 gridview 的同一面板)内创建一个按钮，并使用 css 使其不可见，而不是来自 asp.net 中使用的可见属性，如下所示:

 <asp:button ID="InvisButton" runat="server" style="display:none;" OnClick="InvisButton_Click" />

Button 用于触发服务器端代码以能够绑定(bind) gridview(pagemethods 或 webmethods 不允许使用实例成员，因为它使用共享函数。

将文本框放在更新面板外并删除 autopostback=true(如果您正在使用它)。

在主体的末尾使用以下代码:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=txtSearch.ClientID%>').bind('keyup', function () {
            alert($('#<%=txtSearch.ClientID%>').val());
            $('#<%=InvisButton.ClientID%>').click();

        });
    });

</script>

jquery 代码用于将 keyup 事件(类似于按下的键，但之后键被单击)绑定(bind)到某个函数，您可以在其中执行任何您想要的代码。但是，$('#InvisButton').click() 用于触发具有所述 ID 或其点击事件处理程序的按钮的服务器端代码。在我的例子中，我使用了简单的代码，在你的例子中，也许你可以像这样使用它:

protected void InvisButton_Click(object sender, EventArgs e)
{
// place your wanted code here
gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();
}

注意事项:

抱歉，如果出现任何功能错误，我尝试从 vb.net 转换为 C# 并更改 ID。