不确定在哪里放置 Scripts.Render for JQuery答案

【问题标题】：Not sure where to place Scripts.Render for JQuery不确定在哪里放置 Scripts.Render for JQuery
【发布时间】：2015-05-17 16:26:00
【问题描述】：

我在尝试调用 JQuery 中的自动完成函数时收到“Uncaught TypeError: undefined is not a function”，我假设我有我的脚本.在错误的地方渲染。 JQuery 脚本应该放在 layout.cshtml 中的什么位置？我的假设是最重要的，但无论我把它们放在哪里，我似乎都无法让它发挥作用。

这是我的布局文件的顶部：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/themes/base/css")
</head>...

在底部我有这个：

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

在我的视图文件的底部，我有 javascript：

@section scripts{
    <script>
    $(document).ready(function () {

        $('#mpvalue').autocomplete({
            source: '@Url.Action("MyMethod")'
        });

    });
    </script>
}

我还在 BundleConfig 中进行了一些捆绑：

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                  "~/Content/themes/base/jquery.ui.core.css",
                  "~/Content/themes/base/jquery.ui.resizable.css",
                  "~/Content/themes/base/jquery.ui.selectable.css",
                  "~/Content/themes/base/jquery.ui.accordion.css",
                  "~/Content/themes/base/jquery.ui.autocomplete.css",
                  "~/Content/themes/base/jquery.ui.button.css",
                  "~/Content/themes/base/jquery.ui.dialog.css",
                  "~/Content/themes/base/jquery.ui.slider.css",
                  "~/Content/themes/base/jquery.ui.tabs.css",
                  "~/Content/themes/base/jquery.ui.datepicker.css",
                  "~/Content/themes/base/jquery.ui.progressbar.css",
                  "~/Content/themes/base/jquery.ui.theme.css"));
    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/respond.js"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));

根据我在网络上的其他帖子和示例中阅读的内容，一切似乎都在正确的位置。

我在做什么来抛出“Uncaught TypeError: undefined is not a function”？

任何帮助将不胜感激

谢谢！

编辑：这是在 ASP.NET MVC 5 上运行的

【问题讨论】：

您已经重复了两次Scripts.Render("~/bundles/modernizr")（可能还重复了其他人？）保持一致并将@Scripts.Render() 呈现在一个位置（最好在底部，但有支持和反对将脚本放在头部的论点））。确保它们的顺序正确且没有重复。
能否提供相关生成的 HTML 标签（在浏览器中查看源代码）？

标签： jquery asp.net-mvc asp.net-mvc-5

【解决方案1】：

您的包含顺序实际上与您的 JS 错误没有任何关系。它看起来不像 jQueryUI JavaScript 文件实际上包含在您的任何脚本包中。你有一堆 jQueryUI 的 CSS 文件，但没有 JS 文件。在问题中包含的代码中，您尝试呈现一个名为“jqueryui”的包，但在 BundleConfig 中没有使用该名称定义的包。

假设您已将 jQueryUI 添加到项目中，jQueryUI 脚本包应如下所示（取自 MVC4 模板）：

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

【讨论】：

我为您的答案编辑了相关捆绑包的示例。如果您愿意，可以随意回滚。

【解决方案2】：

根据经验，您将所有@Styles.Render(...) 定义在您的头顶，并将所有@Scripts.Render(...) 定义在您的身体之前。

它们肯定会在其他地方工作，但是你会遇到不同类型的性能问题，或者只是像现在这样简单的重复声明。

在这种情况下，您确实有一个重复的 modernizr 声明。

如果此答案不能解决您的问题，请提供相关生成的 HTML（页面底部的 <script>/<style> 标签）以及控制台输出（它会告诉您从这个错误来自哪个脚本）。

【讨论】：