javascript - 使用来自asp.net gridview函数的jquery的客户端搜索文本框不起作用

问题描述

我想使用 asp.net gridview 从 jquery 函数客户端搜索订单 ID，但 jquery 函数不调用也不从网格视图搜索订单 ID。任何专家都可以帮助我的代码有什么问题，以及如何解决这个问题。我已经分享了整个代码。

HTML

  <asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>

  <asp:Button ID="Button1" runat="server" Text="Search" />

网格视图

<asp:Panel ID="Panel1" ScrollBars="Vertical" Height="500px" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true" Width="100%"
                        BorderColor ="#DEDFDE" BorderStyle="Ridge" BorderWidth="1px" CellPadding="4" 
                        Font-Size="Small" ForeColor="Black" GridLines="Vertical"
                        OnRowDataBound="GridView1_RowDataBound" OnDataBound="OnDataBound"
                        CssClass="table table-responsive table-striped table-hover" EmptyDataText="No Record Found..." RowStyle-Height="7px">

                <Columns>

                    <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" HeaderStyle-Width="40px">

                    <asp:boundfield datafield="OrderID" headertext="OrderID"/>

                    <%--<asp:CommandField ShowEditButton="True" ItemStyle-HorizontalAlign="Center"/>
                    <asp:CommandField ShowDeleteButton="True"  ItemStyle-HorizontalAlign="Center" />--%>
                </Columns>

                <EmptyDataRowStyle Width="1195px" HorizontalAlign="Center" BackColor="#C2D69B" />
                <RowStyle BackColor="#F7F7DE" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                <HeaderStyle Height="10px" VerticalAlign="Middle" BackColor="#6B696B" CssClass="tb_font" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView>
        </asp:Panel>

jQuery 函数

<script type="text/javascript">
$(document).ready(function() {

      $('#Button1').click(function(event) {
         event.preventDefault();
         var searchKey = $('#txtSearchBox').val();
         $("#GridView1 tr td:nth-child(2)").each(function() {
            var cellText = $(this).text().toLowerCase();
            if (cellText.indexOf(searchKey) >= 0) {
                  $(this).parent().show();
            }
            else {
                $(this).parent().hide();
            }
          });
       });
});
</script>

标签： javascriptc#jqueryasp.net

您代码上的每个 id，它可能在页面上呈现不同。

所以要在客户端 JavaScript 上使用它，你必须渲染它，因为它将由 asp.net 渲染

例如，要捕获文本框

<asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>

您必须在 Javascript 上使用这种或 id 渲染<%=txtSearchBox%>，您的代码将类似于：

var searchKey = $('#<%=txtSearchBox.ClientID%>').val();

因此，您需要对在 javascript 上调用的所有控件执行相同的操作。

javascript - 使用来自asp.net gridview函数的jquery的客户端搜索文本框不起作用

问题描述

解决方案

推荐阅读