在C#MVC web項目中,默認情況下,默認情況下,jQuery軟件包被附加到_Layout.html
。 但是,當我嘗試在Home/Index
的剃刀視圖(.cshtml)中調用jQuery時發生了$ is not defined
錯誤。MVC全局腳本文件
(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 © [email protected] 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>
感謝
顯示如何在代碼中添加 – Krishna