c# - 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 中我有以下点击事件

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

但是，当页面加载时出现以下错误:

Uncaught ReferenceError: $ is not defined

我的理解很有限，但是，我认为在加载单个 View 之前它已经加载了 jQuery 库。任何帮助将不胜感激。

Answer 1

由于您对“myScript.js”的引用不在脚本部分中，它们将呈现在页面中与您的 View 内联的任何位置。如果它们位于您 View 的顶部，那么它们将在您调用 RenderBody() 时在布局中呈现。如果您在布局底部加载脚本，那么 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>
}