在布局中的脚本之前加载 MVC 渲染部分答案

【问题标题】：MVC Render section loading before scripts in Layout在布局中的脚本之前加载 MVC 渲染部分
【发布时间】：2015-09-22 18:56:58
【问题描述】：

我的 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

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

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

由于您对“myScript.js”的引用不在脚本部分中，因此它们将在页面中呈现在与您的视图内联的任何位置。如果它们位于视图的顶部，那么它们将在您调用 RenderBody() 的位置呈现在布局中。如果您在布局底部加载脚本，那么在加载 myScripts.js 文件时，jQuery 和所有其他脚本都不会被加载，因此 '$' 将是未定义的。

尝试将 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>
}

【讨论】：

小修正：部分是Scripts，不是Script
部分名称是您选择的任何名称。在 OP 的情况下，他们将其称为“脚本”（单数），如他们的第一个代码 sn-p 的 @RenderSection("Script", false) 行中所定义。
你是对的。 MVC 默认有 Scripts 部分，但 OP 定义了自己的部分。

【解决方案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>

【讨论】：

另外，我发现 Microsoft 使用的 MVC 模板在布局页面底部包含 jQuery，因此内容页面会在加载到页面之前尝试引用 jQuery。跨度>
是的，我使用 MVC 的次数越多，我就越经常注意到它发生的时候。

【解决方案3】：

我遇到了类似的问题，我在_Layout.cshtml 中的所有脚本最后都加载了，这导致了$ Jquery not defined 错误。所以，我必须做的是：

只需在_Layout.cshtml 的<head></head> 标签内移动<script>...</scripts>
之后效果真的很好

【讨论】：