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的按键上绑定。

编辑：我找到了TextBox的解决方案服务器站点OnTextChanged事件，在按 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事件，所以我不知道该怎么做？< / p>

更新：我已经尝试过将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用于触发服务器端代码以便能够绑定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事件（类似于按下的键，但在点击键之后）到某个函数，在那里你可以做任何你想要的代码。但是，$（＆＃39; #InvisButton＆＃39;）。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();
}

修改

在EveryKeyPress上

<强> 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 }

Answer 3

您可以使用WebMethod函数调用过滤器数据喜欢这个

private static int PageSize = 5;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyRow();
    }
}

private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("City");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

[WebMethod]
public static string GetCustomers(string searchTerm, int pageIndex)
{
    string query = "[GetCustomers_Pager]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", PageSize);
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd, pageIndex).GetXml();
}

private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
    string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                DataTable dt = new DataTable("Pager");
                dt.Columns.Add("PageIndex");
                dt.Columns.Add("PageSize");
                dt.Columns.Add("RecordCount");
                dt.Rows.Add();
                dt.Rows[0]["PageIndex"] = pageIndex;
                dt.Rows[0]["PageSize"] = PageSize;
                dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

从.aspx页面调用

     function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCustomers",
            data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

更多参考： https://www.aspsnippets.com/demos/685/

Answer 4

仅当您使用rownames(x)[x[,"D"]==20]

时，更改的文字才有效

AutoPostBack = true允许控件回发到服务器。它与事件相关联。

AutoPostBack = true

修改

在EveryKeyPress上

<强> ASPX

<asp:TextBox ID="txtSearch" runat="server" AutoPostBack = "true" OnTextChanged="txtSearch_TextChanged" > </asp:TextBox> protected void txtSearch_TextChanged(object sender, EventArgs e) { gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim()); gvBanquet.DataBind(); }

<强> C＃

<asp:textbox id="MyTextBox" runat="server" onkeypress="__doPostBack(this.name,'OnKeyPress');" ></asp:textbox>

Answer 5

您缺少ID选择器，请使用此

替换您的示例代码

$(document).ready(function () {

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

}）

Answer 6

替换：OnKeyPressed="txtSearch_KeyPressed()" 使用：AutoPostBack="true"
在设计模式下查看aspx代码（您可以在其中看到您的用户界面。）
双击文本框。

在自动创建的方法中添加以下两行进行绑定：

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

基本上，每次将一个字符插入到文本框中时，都会发生一个PostBack，并且将执行visual studio自动创建的新方法（如果您粘贴了代码，则会绑定数据）。

*如果您每次都绑定到数据库，您的代码将占用内存并且速度很慢（而不是使用Angularjs加载）。

Answer 7

你无法从jQuery过滤文本框，感染.ASPX控件无法从jQuery / Javascript调用.CS代码。您可以通过将UpdatePanel添加到.ASPX代码中然后添加标记AutopostBack=True来实现它。

Answer 8

在jQuery而不是'#<%=txtSearch.ClientID%>'中为asp控件ID使用此'#txtSearch'语法。

添加此脚本：

<script src="../Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=txtSearch.ClientID%>').bind('keyup', function (e) {
            $('#<%=btnInvisible.ClientID%>').click();
        });
    });

</script>

在 .Aspx 代码中：

<asp:TextBox ID="txtSearch" placeholder="Search..." runat="server"></asp:TextBox>

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

        <asp:Button ID="btnInvisible" runat="server" style="display: none" 
            OnClick="btnInvisible_Click" />

        // Place GridView here

    </ContentTemplate>
</asp:UpdatePanel>

在代码隐藏中：

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

结果是：

从

8 个答案:

注意：