2017-04-27 83 views
-1

在C#MVC web项目中,默认情况下,默认情况下,jQuery软件包被附加到_Layout.html。 但是,当我尝试在Home/Index的剃刀视图(.cshtml)中调用jQuery时发生了$ is not defined错误。MVC全局脚本文件

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

但我可以在加载页面后在web调试器(Chrome命令行)中执行jQuery。

enter image description here

因此,是否有可能追加一个脚本,并使其可在网站上的所有网页?

_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> 

感谢

+0

显示如何在代码中添加 – Krishna

回答

0

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

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

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

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

@RenderSection("scripts", required: false) 

为了确保_Layout.cshtml负荷第一的脚本,

家里的Index.cshtml应包括

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

通过这样做,_Layout.cshtml节的“脚本”将在Home的Index.html脚本之前加载。 所以$的错误没有定义就消失了。

-1

从_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> 
+0

不知道“完整性”属性。很高兴知道。 – Dinei

0
从束

您正在使用jQuery和这两个文件。请删除其中一个。检查呈现的html,在jQuery创建像这样的问题之前调用$。

+0

它不是这种情况,我认为这个问题是关于MVC的,在加载_layout.cshtml之前先在子视图中加载脚本 – SKLTFZ