Question

在我的_Layout页面中，我将Navbar拆分为自己的局部视图，然后在_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"));

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

Answer 1

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

Answer 2

这是ASP.NET网页吗？

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

Answer 3

我通过将jQuery添加到.js文件并在SELECT YearsSinceBirth As Age中调用该文件来解决这个问题。

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

3 个答案: