从代码隐藏的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绑定代码来自.CS文件:

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

我不知道它会如何起作用？它应该在TextBox的按键上绑定.

---

编辑:我找到了OnTextChangedTextBox 的解决方案服务器站点事件,它在按下Enter而不是按键后绑定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();
}

我不希望它与OnTextChanged事件,但我认为它将使用JavaScript或jQuery的 keypressed事件,所以我不知道该怎么办？

---

更新:我已尝试下面的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的同一个)中创建一个Button,并使用css使其不可见,而不是使用asp.net中使用的可见属性,如下所示:

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

Button用于触发服务器端代码以便能够绑定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事件(类似于按下的键,但在点击键之后)到某个函数,在那里你可以做任何你想要的代码.但是,$('#InvisButton').click()用于触发具有所述ID或其click事件处理程序的按钮的服务器端代码.在我的情况下,我使用简单的代码,在你的情况下,也许你可以像这样使用它:

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.

Answer 2

您可以在文本框OnTextChanged上使用OnKeyPressed，也可以AutoPostBack="True"在文本框上设置，您可以在文件后面的代码中执行任何您想要的操作，它可以正常工作。

   <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_Changed()" 
    AutoPostBack="True"> </asp:TextBox>

C# 代码

关于文本更改

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

编辑

每次按键时

ASPX

      <asp:TextBox ID="txtSearch" runat="server"  
    AutoPostBack="True"> </asp:TextBox>
 <script>
    $("#<%=txtSearch.ClientID%>").keypress(function () {
        console.log("Handler for .keypress() called.");
        __doPostBack(this.name, 'OnKeyPress');
    });
</script>

C＃

protected void Page_Load(object sender, EventArgs e){
    var ctrlName = Request.Params[Page.postEventSourceID];
    var args = Request.Params[Page.postEventArgumentID];

    if(ctrlName == txtSearch.UniqueID && args == "OnKeyPress"){
        MyTextBox_OnKeyPress(ctrlName, args);
    }
}

private void MyTextBox_OnKeyPress(string ctrlName, string args){
    //your code goes here
}