基本 jQuery 脚本在 NavBar 部分视图中不起作用

Posted 2023-05-08

技术标签:

【中文标题】基本 jQuery 脚本在 NavBar 部分视图中不起作用【英文标题】：Basic jQuery scripts aren't working in NavBar partial View 【发布时间】：2018-07-15 09:26:43 【问题描述】：

在我的_Layout 页面中，我将导航栏拆分为它自己的局部视图，然后在_Layout 页面中调用该局部视图。

这是我的_Layout：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My Application</title>
    @Styles.Render("~/Content/styles")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/lib")
</head>
<body>
    @Html.Partial("_Navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/datatables")
    @RenderSection("scripts", required: false)
</body>
</html>

现在在我的_Navbar:

@using System.Globalization
@using System.Threading

@
    var user = @User.Identity.Name.Split('\\')[1].Replace('.', ' ');
    CultureInfo cultureInfo = Thread.CurrentThread.CurrentCulture;
    TextInfo textInfo = cultureInfo.TextInfo;
    var userNameCapital = textInfo.ToTitleCase(user);


<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        @Html.ActionLink("My Application", "Index", "Home", new  area = "" , new  @class = "navbar-brand" )
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation" style="">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor02">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link 1 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
            <form class="form-inline mr-auto">
                <input id="Nav-Input-Txt" class="form-control mr-sm-2" type="text" placeholder="Search">
                <input id="NavBar-Search-Btn" class="btn btn-secondary my-2 my-sm-0" type="submit" value="Search" />
            </form>
            <p class="nav navbar-text navbar-right">@userNameCapital</p>
        </div>
    </div>
</nav>

@section scripts
    <script>
        $(document).ready(function () 

            console.log("test");

            $("#NavBar-Search-Btn").on("click",
                function () 
                    console.log("TEST");
                );
        );
    </script>

当我点击按钮时，我没有收到我的console.log("TEST");.. 而是我的页面只是刷新。如何让 jQuery 处理我的 _Navbar 部分视图？

更新

@Scripts.Render("~/bundles/lib") 是我的 jQuery 版本所在的位置。

bundles.Add(new ScriptBundle("~/bundles/lib").Include(
            "~/Scripts/jquery-version.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/bootbox.js",
            "~/Scripts/respond.js",
            "~/Scripts/moment.js",
            "~/Scripts/jquery.datetimepicker.js",
            "~/Scripts/jquery-ui.js",
            "~/Scripts/toastr.js",
            "~/Scripts/select2.full.js",
            "~/Scripts/jquery.mask.min.js",
            "~/Scripts/SiteScript.js"));

UPDATE 2 将脚本放入 _Layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My Application</title>
    @Styles.Render("~/Content/styles")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/lib")
</head>
<body>
@Html.Partial("_Navbar")
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/datatables")
@RenderSection("scripts", required: false)

    @section scripts
        <script>
        $(document).ready(function () 

            console.log("test");

            $("#NavBar-Search-Btn").on("click",
                function () 
                    console.log("TEST");
                );
        );
        </script>
    
</body>
</html>

【问题讨论】：

【参考方案1】：

@section 脚本应位于父级 _Layout 视图中，而不是 _Navbar 部分视图中。

【讨论】：

我仍然收到相同的结果。单击按钮时，我的控制台中没有收到任何内容。我将用我编辑的内容更新问题以适合您的答案。【参考方案2】：

这是 ASP.NET 网页吗？

我不知道，如果我遗漏了什么，但您在表单中有一个提交按钮，它将提交表单并刷新页面。您可以尝试将类型更改为按钮而不是提交。

【讨论】：

【参考方案3】：

我自己通过将 jQuery 添加到 .js 文件中并在 _Layout 中调用该文件来解决此问题。

【讨论】：

以上是关于基本 jQuery 脚本在 NavBar 部分视图中不起作用的主要内容，如果未能解决你的问题，请参考以下文章