不确定在哪里放置 Scripts.Render for JQuery
Posted
技术标签:
【中文标题】不确定在哪里放置 Scripts.Render for JQuery【英文标题】：Not sure where to place 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 标签（在浏览器中查看源代码）？
【参考方案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> 标签）以及控制台输出（它会告诉您从这个错误来自哪个脚本）。
【讨论】：
以上是关于不确定在哪里放置 Scripts.Render for JQuery的主要内容，如果未能解决你的问题，请参考以下文章
我正在使用 Firebase Apple 登录进行用户登录，但我不确定在哪里放置 https://myapp.firebaseapp.com/__/auth/handler？
我想用 Scripts.Render 使用 defer 并用 Styles.Render 预加载