MVC在佈局中的腳本之前渲染部分

Question

我似乎在加載我的JavaScript文件的順序時遇到了一些問題。在我的_Layout.cshtml中引用JQuery，然後創建我的腳本部分。

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script> 
@RenderSection("Script", false) 

在我的我的主視圖文件我引用myScript.js文件

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="~/Scripts/myScripts.js"></script> 

@section Script { 
    <script> 

     var options = { 
      lineGraphData: @Html.Raw(Model.LineGraphJson), 
     } 

     var viewModel = init(options); 
     ko.applyBindings(viewModel); 

    </script> 
} 

在myScripts.js我已經click事件以下

$('.update-linegraph').on('click', function() { 
    UpdateLineGraph(); 
}); 

然而，在頁面加載時，我得到以下錯誤：

Uncaught ReferenceError: $ is not defined 

然而，我的理解是非常有限的，我認爲它已經加載了單個視圖加載之前的jQuery庫。任何幫助將不勝感激。

Answer 1

由於您對「myScript.js」的引用不在腳本部分，因此它們將在頁面呈現的任何位置與視圖內聯。如果他們位於視圖的頂部，那麼他們將在您調用RenderBody（）的位置渲染布局。如果將腳本加載到Layout的底部，那麼jQuery和所有其他腳本將不會在加載myScripts.js文件時加載，因此'$'將不確定。

嘗試在腳本部分內移動您的myScripts.js引用。

@section Script { 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="~/Scripts/myScripts.js"></script> 
    <script> 

     var options = { 
      lineGraphData: @Html.Raw(Model.LineGraphJson), 
     } 

     var viewModel = init(options); 
     ko.applyBindings(viewModel); 

    </script> 
} 

Answer 2

每當我看到錯誤

Uncaught ReferenceError: $ is not defined 

那是因爲我想要的地方使用jQuery，我沒有正確引用的jQuery庫。

我最近沒有用過很多jQuery，所以我可能會錯誤地思考這種方式，但我相信錯誤是告訴你你沒有在你的myScripts.js文件中引用jQuery庫。

我會親自嘗試加入您的jQuery引用到您的myScript.js文件，以及像這樣

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
    $('.update-linegraph').on('click', function() { 
     UpdateLineGraph(); 
    }); 
</script>