时间戳

首页 > 解决方案 > 为什么我的 JS 脚本不能在我的 ASPNET 视图上运行？如何以正确的方式使用我的脚本？

javascript - 为什么我的 JS 脚本不能在我的 ASPNET 视图上运行？如何以正确的方式使用我的脚本？

问题描述

我的 JS 脚本有问题，我真的不知道为什么，因为我知道它写得很好，因为它已经在另一个应用程序中使用了。

我按顺序添加所有内容：

  1. bootstrap.min.js
  2. jquery.min.js
  3. bootstrap.min.js

这就是我在页面中添加所需文件的方式


 public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/site.css"));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-3.4.1.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-2.8.3.js"));

            bundles.Add(new ScriptBundle("~/bundles/popper").Include(
                        "~/Scripts/umd/popper.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/popper-utils.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.min.js"));
        }
    }

这是我的脚本，我把它放在我的 _layout.html 文件的头部

    <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript">
        $(document).ready(function() {
            $("#search").on("keyup", function () {
                var value = $(this).val().toLowerCase();

                $("#div > a").show().filter(function() {                           //Select all anchor elements and show them
                    return $(this).find('a').text().toLowerCase().indexOf(value) === -1;  //Find the anchor and check if the value is substring of the text. Return true if not found.
                }).hide();                                                          //Hide all anchors that the value is not the substring of text
            });
        });
    </script>

这是我的观点的主体。这是脚本应该工作的地方。


<div id="accordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header bg-dark text-light" id="headingOne">
                <h5 class="mb-0">
                    <a class="btn btn-link" data-toggle="collapse" data-target="#e-@item.directoryName" aria-expanded="false">
                        <i class="fa fa-folder-open"></i>
                        @item.directoryName
                    </a>
                </h5>
            </div>

            <div id="e-@item.directoryName" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="my-2 my-lg-0 card-body">
                    <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="search"> <!-- Here is where I start to use my js script. This is the input-->
                </div>
                <div class="card-body overflow-auto" id="div" style="max-height: 300px">
                    @foreach (string file in @item.fileName)
                    {
                        <a class="dropdown-item list-unstyled" href="#">@file</a> <!-- Here are the elements i'm trying to search-->
                    }
                </div>
            </div>

        </div>
    }
</div>

我想创建一个搜索过滤内容，但我不知道为什么它不适用于我的视图

标签： javascriptjqueryhtmlasp.netasp.net-mvc

解决方案

尝试像这样添加脚本：

    <script src="~/bundles/jquery" type="text/javascript" runat="server"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#search").on("keyup", function () {
                var value = $(this).val().toLowerCase();

                $("#div > a").show().filter(function() {                           //Select all anchor elements and show them
                    return $(this).find('a').text().toLowerCase().indexOf(value) === -1;  //Find the anchor and check if the value is substring of the text. Return true if not found.
                }).hide();                                                          //Hide all anchors that the value is not the substring of text
            });
        });
    </script>

我相信~/some/bundle/path语法只能在服务器控件（带有 runat="server" 的元素）上正常工作。

推荐阅读