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

【问题标题】：Basic jQuery scripts aren't working in NavBar partial View基本 jQuery 脚本在 NavBar 部分视图中不起作用
【发布时间】：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>

【问题讨论】：

标签： javascript jquery asp.net twitter-bootstrap bootstrap-4

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

这是 ASP.NET 网页吗？

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

【讨论】：

【解决方案3】：

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

【讨论】：