jquery - 在 MVC 布局 View 中加载 jQuery 的正确位置

Question

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

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

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

但是，这总是会抛出错误错误:'$'未定义，因为 jQuery 在 RenderBody() 之后才会加载。

我无法想象这是一个新问题，这似乎是一个相当常见的任务...关于如何处理这个问题有什么建议吗？

作为引用，这里是 jQuery 的加载位置:

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

编辑

我最终将上面的脚本移到了 script.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>

但这似乎仍然是错误的，因为现在必须为使用主布局 View 的每个页面加载脚本。它有效，但是，这是最好的方法吗？

Answer 1

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

_布局

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

我的 View

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

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