在 MVC 布局视图中加载 jQuery 的正确位置

Question

我使用默认模板创建了一个 MVC 4，其中 @Script.Render(~"bundles/jquery") 在 @RenderBody() 之后调用。根据this 的帖子，这是推荐的执行顺序，以防止加载脚本来阻止页面的呈现。

我想在我的视图或RenderBody() 部分中添加一个小的 jQuery 调用。它看起来像这样，在我的视图顶部：

<script type="text/javascript">
$(document).ready(function()
{
    $("#eta_table").tablesorter({
        headers: {
            0: { sorter: false }
        }
    });
});

但是，这总是会抛出错误Error: '$' is undefined，因为直到RenderBody() 之后才会加载jQuery。

我无法想象这是一个新问题，它似乎是一个相当普遍的任务......关于如何处理这个问题的任何建议？

作为参考，这里是 jQuery 的加载位置：

        @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

编辑

我最终将上面的脚本移动到我的 scripts.js 文件中，并将其加载到布局页面中的 jQuery 下面，如下所示：

            bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                    "~/Scripts/Custom/tablesorter.js",
                    "~/Scripts/Custom/scripts.js"));

还有 HTML：

        @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/custom")
    @RenderSection("scripts", required: false)
</body>

除了这似乎仍然是错误的，因为现在必须为使用主布局视图的每个页面加载脚本。它正在工作，但是，这是最好的方法吗？

Answer 1

在所有其他库脚本下方创建一个新部分 MyScripts

_布局

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
@RenderSection("MyScripts", required: false)

我的视图

@section MyScripts {
    <script type="text/javascript">
        $("#eta_table");
        ...
    </script>
}

现在您的自定义页面脚本只会在 jQuery 加载后加载一次。