Question

在C＃MVC Web项目中，默认情况下，默认情况下会在_Layout.html附加jQuery包。但是，当我尝试在$ is not defined的剃刀视图（.cshtml）中调用jQuery时发生Home/Index错误。

(function(){$("#id").val();} // $ is not defined error

但是我可以在加载页面后在Web调试器（Chrome命令行）中执行jQuery。

因此，是否可以附加脚本并使其可用于网站中的所有页面？

_Layout.html已附上。感谢

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../../node_modules/admin-lte/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- fullCalendar 2.2.5-->
    <link rel="stylesheet" href="../../node_modules/admin-lte/plugins/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../../node_modules/admin-lte/plugins/fullcalendar/fullcalendar.print.css" media="print">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../node_modules/admin-lte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="../../node_modules/admin-lte/dist/css/skins/_all-skins.min.css">

</head>
<body class="skin-blue layout-top-nav" style="height: auto;">
    <div class="wrapper" style="height: auto;">
        @*<div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li>@Html.ActionLink("Invoice List", "InvoiceList", "Home")</li>
                            <li>@Html.ActionLink("Payment", "Payment", "Home")</li>
                        </ul>
                        @Html.Partial("_LoginPartial")
                    </div>
                </div>
            </div>*@


        <header class="main-header">
            <nav class="navbar navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        @Html.ActionLink("A Dummy System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
                        <ul class="nav navbar-nav">
                            @if (User.Identity.IsAuthenticated)
                            {
                                <li>@Html.ActionLink("  Invoice List", "InvoiceList", "Home", new { area = "" }, new { @class = "fa fa-refresh" })</li>
                                <li>@Html.ActionLink("  Payment", "Payment", "Home", new { area = "" }, new { @class = "fa fa-dollar" })</li>
                            }
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                    <!-- Navbar Right Menu -->
                    <div class="navbar-custom-menu">
                        @Html.Partial("_LoginPartial")
                    </div>
                    <!-- /.navbar-custom-menu -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </header>

        <div class="content-wrapper" style="min-height: 261px;">
            <div class="container body-content">
                <!-- Content Header (Page header) -->
                @*<section class="content-header">
                        <h1>
                            Top Navigation
                            <small>Example 2.0</small>
                        </h1>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                            <li><a href="#">Layout</a></li>
                            <li class="active">Top Navigation</li>
                        </ol>
                    </section>*@

                <!-- Main content -->
                <section class="content">
                    @RenderBody()
                </section>
                <!-- /.content -->
            </div>
            <!-- /.container -->
        </div>
        <footer class="main-footer">
            <div class="container">
                <div class="pull-right hidden-xs">
                    <b>Version</b> @System.Web.Configuration.WebConfigurationManager.AppSettings["webpages:Version"]
                </div>
                <strong>Copyright © 2017-@DateTime.Now.Year. All rights
                reserved.
            </div>
            <!-- /.container -->
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <!-- jQuery 2.2.3 -->
    <script src="../../node_modules/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="../../node_modules/admin-lte/bootstrap/js/bootstrap.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!-- Slimscroll -->
    <script src="../../node_modules/admin-lte/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="../../node_modules/admin-lte/plugins/fastclick/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="../../node_modules/admin-lte/dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="../../node_modules/admin-lte/dist/js/demo.js"></script>
    <!-- fullCalendar 2.2.5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script src="../../node_modules/admin-lte/plugins/fullcalendar/fullcalendar.min.js"></script>
    <!-- Page specific script -->
    @RenderSection("scripts", required: false)
</body>
</html>

由于

Answer 1

您正在使用捆绑包和文件中的jQuery。请删除其中一个。检查渲染的html，在jQuery创建问题之前调用$。

Answer 2

这是由于对MVC的误解造成的。

目前的行为是Home的Index.cshtml的脚本首先在_Layout.cshtml之前加载。

为了解决这个问题，我发现脚本的渲染顺序有一个部分。

默认情况下，我的项目在_Layout.cshtml中包含此行

@RenderSection("scripts", required: false)

要确保首先加载_Layout.cshtml脚本，

Home的Index.cshtml应该包括

@section scripts{
    <script>
        $(function(){
            $("#txt").val();
        })
    </script>
}

通过这样做，_Layout.cshtml部分＆＃34;脚本＆＃34;将在Home的Index.html脚本之前加载。所以没有定义$的错误就消失了。

Answer 3

从_Layout.html中删除此行：

@Scripts.Render("~/bundles/jquery")

并确保您在指定地点拥有jquery-2.2.3.min.js文件。

更好的是，请按照https://code.jquery.com上的示例使用：

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

MVC全局脚本文件

3 个答案: