38

我使用默认模板创建了一个 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>

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

4

1 回答 1

85

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

_布局

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

我的观点

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

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

于 2013-03-11T20:27:23.507 回答