Bootstrap Jquery Фильтр не работает, когда я использую главную страницу в asp. net. Работает нормально в simpe webforms - PullRequest
Новая
       45

Bootstrap Jquery Фильтр не работает, когда я использую главную страницу в asp. net. Работает нормально в simpe webforms

0 голосов
/ 16 января 2020

Когда я использую веб-форму, она работает нормально. но с главной страницей это не сработало, я предоставил здесь почти весь код.

есть текстовое поле и таблица. Цель - поиск по любому ключевому слову.

есть 3 ссылки на файлы, которые я также связал на своей главной странице

тема. css

панель инструментов. 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>

Веб-форма с главной страницей 

<%@ 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)
      });
   });
});

Пожалуйста, помогите мне решить эту проблему.

1 Ответ

0 голосов
/ 16 января 2020

Отображаемый идентификатор не всегда совпадает с тем, как вы его вводите, особенно когда вы добавляете его на главную страницу Чтобы получить обработанный на странице идентификатор из <asp:TextBox ID="myInput" Style="text-align: center;..., вы должны использовать .ClientID как 

 $("#<%=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 control, поэтому мы оставили все как есть

Вы также можете прочитать о Доступ к имени управляющего клиента, а не ID в ASP. NET

Обновление

Если у вас есть этот код вне asp. net их, он не будет работать, потому что вы не можете найти идентификатор, ни отрендерить его. Переместите этот javascript -код внутри страницы или визуализируйте идентификаторы перед загрузкой этого кода и используйте эти идентификаторы во внешнем коде, как в этом примере

Как получить asp. net клиента идентификатор для внешнего javascript файла

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...