我有一个带有 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>最佳答案
我希望这个解决方案能有所帮助，尽管它与您实际使用的方法有点不同。 仔细执行以下操作，如果需要任何更改，请随时发表评论。 您需要首先使用 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。
关于javascript - 从隐藏的代码中过滤 TextBox 的 KeyPress 事件上的 GridView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46387363/