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

Question

我使用默认模板创建了一个MVC 4,@Script.Render(~"bundles/jquery")后面会调用它@RenderBody().根据这篇文章,这是推荐的执行顺序,以防止加载脚本来阻止页面的呈现.

我想在我的视图或我的RenderBody()部分中添加一个小的jQuery调用.看起来像这样,在我的观点的顶部:

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

但是,这将始终抛出错误,Error: '$' is undefined因为jQuery直到之后才加载RenderBody().

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

作为参考,这里是加载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后加载一次.