2017-04-27 70 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