当我在 asp.net 中使用母版页时，Bootstrap Jquery 过滤器不起作用。它在简单的网络表单中工作正常答案

【问题标题】：Bootstrap Jquery Filter not working, when i use master page in asp.net. Its works fine in simpe webforms当我在 asp.net 中使用母版页时，Bootstrap Jquery 过滤器不起作用。它在简单的网络表单中工作正常
【发布时间】：2020-01-16 11:01:19
【问题描述】：

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

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

我的母版页中还链接了 3 个文件链接

theme.css

dashboard.css

theme.js

这里是母版页

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

搜索.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)
      });
   });
});

请帮我解决这个问题。

【问题讨论】：

检查 html。 myInput 可能类似于 ContentPlaceHolder1_myInput。或使用ClientID

标签： asp.net master-pages

【解决方案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

【讨论】：

我试过 $("#").on("keyup", function () { 但它不起作用。ContentPlaceHolder1_myInput 这个工作。
@UmairFarooq 如果您将它添加到 asp.net 页面中，它会起作用。如果你在 .js 文件上有它当然是行不通的，不是渲染 id，在 asp.net 之外添加这小部分代码也是不合逻辑的......
完美...是的，你是对的 :) 感谢您的信息。