Bootstrap Jquery 当我在 asp.net 中使用母版页时，过滤器不起作用。它在 simpe webforms 中运行良好

Question

当我使用 webform 时，它工作正常。但是对于母版页它没有工作，我在这里提供了几乎所有代码。

有一个文本框和一个 table。目的是使用任何关键字进行搜索。

有 3 个文件链接，我也在我的母版页中链接了这些链接

这是主页

<html>
<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Page</title>
    <link rel="icon" href="favicon.ico" type="img/ico">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.min.css" />
    <link id="themecss" rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
    <link rel="stylesheet" type="text/css" href="css/theme.css" />
    <link rel="stylesheet" type="text/css" href="css/dashboard.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
    <script type="text/javascript" src="js/theme.js"></script>
</body>
</html>

带母版页的 Web 表单

<%@ Page Title="FJ - DashBoard | Company" Language="C#" MasterPageFile="~/AdminMaster.Master" AutoEventWireup="true" CodeBehind="Company.aspx.cs" Inherits="FJ_System.Company1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="js/Search.js"></script>
</asp:Content>
<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title text-center" style="font-size: large"><i class="fa fa-list"></i>Company Details</h3>
            </div>
            <div class="panel-body">
                <asp:TextBox ID="myInput" Style="text-align: center; font: bold; font-size: large" CssClass="form-control" placeholder="Search..." runat="server"></asp:TextBox>
                <br />
                <table class="table table-bordered table-striped table-responsive table-hover">
                    <thead style="text-align-last: center; background-color: black; color: white">
                        <tr>
                            <th>Id</th>
                            <th>Company</th>
                            <th>Adress</th>
                            <th>City</th>
                            <th>Opening Balance</th>
                            <th>Salesman</th>
                        </tr>
                    </thead>
                    <tbody id="myTable" style="text-align: center;">
                        <tr>
                            <td>1</td>
                            <td>Umair</td>
                            <td>latifabad</td>
                            <td>Hyderabad</td>
                            <td>15000</td>
                            <td>David</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Farzan</td>
                            <td>Unitno4</td>
                            <td>Hyderabad</td>
                            <td>15000</td>
                            <td>Parker</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huzaifa</td>
                            <td>Malir</td>
                            <td>Karachi</td>
                            <td>20000</td>
                            <td>Salman</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Search.js

$(document).ready(function () {
 $("#myInput").on("keyup", function () {
     var value = $(this).val().toLowerCase();
     $("#myTable tr").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
   });
});

请帮我解决这个问题。

Answer 1

呈现的 ID 并不总是与您输入的相同，尤其是当您将其添加到母版页时。要从 <asp:TextBox ID="myInput" Style="text-align: center;... 获取在页面 id 上呈现，您必须使用 .ClientID as

 $("#<%=myInput.ClientID%>").on("keyup", function () {

完整代码为

$(document).ready(function () {
 $("#<%=myInput.ClientID%>").on("keyup", function () {
     var value = $(this).val().toLowerCase();
     $("#myTable tr").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
   });
});

请注意 myTable 不是 asp.net 控件，因此我们保留原样

您还可以阅读有关 Accessing control client name and not ID in ASP.NET

更新

如果你在 asp.net 之外有这段代码，它们将无法工作，因为你找不到 id，也不会渲染它。将此 javascript 代码移动到页面内，或在加载此代码之前呈现 ID，并在外部代码中使用该 ID，如本示例

How to get asp.net client id at external javascript file

Bootstrap Jquery 当我在 asp.net 中使用母版页时，过滤器不起作用。它在 simpe webforms 中运行良好

Bootstrap Jquery Filter not working, when i use master page in asp.net. Its works fine in simpe webforms

asp.net

master-pages

更新