Question

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

我想在我的视图或我的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部分

_layout

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

MyView的

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

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

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

1 个答案: