从后面的代码中过滤 TextBox 的 KeyPress 事件上的 GridView
Posted
技术标签:
【中文标题】从后面的代码中过滤 TextBox 的 KeyPress 事件上的 GridView【英文标题】：Filter GridView on TextBox's KeyPress event from code behind 【发布时间】：2018-03-05 08:52:39 【问题描述】：我有一个带有 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 的按键上绑定。
编辑：我找到了一个解决方案服务器站点OnTextChanged TextBox 事件，它在按下 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 的按键事件，所以我不知道该怎么做？
更新：我试过下面的 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>【问题讨论】：
为什么不直接使用 AJAX 更新面板？ 我应该在哪里使用 UpdatePanel 以及如何使用？它是否适用于从键盘按下的文本框 evry 键？ @Asif.Ali 您的代码中缺少 id 选择器。应该是这个 $('#txtSearch').on("keyup", function () 注意 "#" 和 txtSearch 我已经尝试过，但没有工作。我会编辑 这将使您开始使用 UpdatePanel msdn.microsoft.com/en-us/library/bb399001.aspx 【参考方案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 事件（类似于按下的键，但之后单击键）绑定到某个函数，您可以在其中执行任何您想要的代码。但是，$('#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。
【讨论】：
【参考方案2】：您可以在OnKeyPressed 上使用OnTextChanged，也可以在文本框上设置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
【讨论】：
我也尝试过每次按键都不能正常工作。正如我上面所说的，它只有在你写完一组字符后按 Enter 时才有效。但我的问题是每次按键都绑定写一个字符。 它在按键上不起作用，它在 Text Change 上起作用 当您更改文本时，它会触发更改的方法 但我的问题是在从键盘按下的每个键上绑定 GridView。您提供的解决方案，在您回答之前我也有该解决方案但没有用，然后我考虑开始赏金。 当我在你的回答中尝试你的 Edit 但没有成功！ 您可以尝试编辑更改，当您按下任何键时，它将使用 jquery 方法回发我已经测试过此代码，它会正确回发【参考方案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/
【讨论】：
【参考方案4】：仅当您使用 AutoPostBack = true 时，文本更改才有效
AutoPostBack = true 允许控制回发到服务器。它与一个事件相关联。
<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();
编辑：
在每次按键时
ASPX
<asp:textbox id="MyTextBox" runat="server"
onkeypress="__doPostBack(this.name,'OnKeyPress');" ></asp:textbox>
C#
protected void Page_Load(object sender, EventArgs e)
var ctrlName = Request.Params[Page.postEventSourceID];
var args = Request.Params[Page.postEventArgumentID];
if(args == "OnKeyPress")
gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();
【讨论】：
我知道它适用于AutoPostBack = true，但它不适用于从键盘按下的每个键。从键盘按 Enter 即可工作。
@Asif.Ali 您希望它在每次按键时都能正常工作，而不仅仅是 Enter ？
是的。我认为它会使用 JavaScript 或 jQuery.
@Asif.Ali，hafiz 编辑可能适合您的需要，它对您没有帮助？
@Asif.Ali 你能用你的尝试编辑你的问题，这样我就可以看到它是否不会给出另一个解决方案【参考方案5】：
你缺少 id 选择器，用这个替换你的示例代码
$(document).ready(function ()
$('#txtSearch').on("keyup", function ()
// could bind bind GridView here??
e.preventDefault();
)
)
【讨论】：
【参考方案6】：您不能从 jQuery 过滤文本框，感染 .ASPX 控件无法从 jQuery/Javascript 调用 .CS 代码。您可以通过将 UpdatePanel 添加到您的 .ASPX 代码中，然后添加标签 AutopostBack=True 来实现它。
【讨论】：
是的，您的观点是正确的，但我的问题是，它应该使用 jQuery 或 Javascript 过滤 gridview，现在借助 @JKOU 的答案解决了这个问题。现在我已经解决了我的问题，比如this【参考方案7】：-
替换：
OnKeyPressed="txtSearch_KeyPressed()"
与：AutoPostBack="true"
在设计模式下查看 aspx 代码（您可以看到您的用户界面。）
双击文本框。
在自动创建的方法中添加这两行进行绑定：
gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();
基本上，每次在文本框中插入一个字符时，都会发生一个 PostBack 并执行由 Visual Studio 自动创建的新方法（如果您已粘贴代码将绑定数据）。
*如果你每次都绑定到一个数据库，你的代码会吃掉内存并且速度很慢（使用 Angularjs 加载相当多）。
【讨论】：
老实说我不知道 angularjs :( 网上有很多视频可以帮助你。 youtube.com/watch?v=UWwFMpgLP4k 从头到尾在不到 20 分钟的时间内完成（如果您有数据并且愿意学习新东西，但如果您没有，请坚持您已经实现的方法方法。） 我对学习没有兴趣，因为我最后一年的项目是在具有 3 层架构的网络表单中。顺便说一句，感谢您的建议。【参考方案8】：在 jQuery 中使用 '#<%=txtSearch.ClientID%>' 语法代替 '#txtSearch' 的 asp 控件 ID。
添加此脚本：
<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();
结果是：
【讨论】：
我已经为您提供了类似的解决方案，您是说我的文本框和 gridview 在更新面板中，您在更新面板中只有 gridview。 是的，这是我的问题，因为我将 TextBox 和 GridView 放置在更新面板中，但@JKOU 通过将 TextBox 放置在 UpdatePanel 和 GridView 之外解决了我的问题，并且 Invisible 按钮位于 Updatepanel 内部，然后在脚本中工作.bind 但是不起作用.keypress以上是关于从后面的代码中过滤 TextBox 的 KeyPress 事件上的 GridView的主要内容，如果未能解决你的问题，请参考以下文章
通过 TextBox（C#、WinForms）过滤空 DataGridView
使用 TextBox 和 DatePicker 元素过滤 WPF DataGrid 行