0x800a1391 - JavaScript 运行时错误：'jQuery' 未定义 - MVC 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17672643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
0x800a1391 - JavaScript runtime error: 'jQuery' is undefined - MVC 4
提问by Wosh
I want to get a really simple modal dialog running. So following a tutorial I end up with this code:
我想运行一个非常简单的模态对话框。所以按照教程我最终得到了这个代码：
BundleConfig:
捆绑配置：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.8.24.js"));
_Layout:
_布局：
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
</head>
<body>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@RenderSection("scripts", required: false)
</body>
and Index:
和索引：
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<script type="text/javascript">
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
</script>
<div style="float: left; width: 250px;">
<button id="create-user">Create new user</button>
</div>
</div>
</section>
}
However when I run it I end up with 0x800a1391 - JavaScript runtime error: 'jQuery' is undefined, inside the jquery-ui library. If I simply put the code in an html page it works as expected. So the problem comes from the MVC project. I am using visual studio 2012 on Windows 8. Any thoughts?
但是，当我运行它时，我最终得到 0x800a1391 - JavaScript 运行时错误：'jQuery' 未定义，在 jquery-ui 库中。如果我只是将代码放在 html 页面中，它会按预期工作。所以问题出在MVC项目上。我在 Windows 8 上使用 Visual Studio 2012。有什么想法吗？
回答by Geoff Appleford
By default, the MVC bundler ignores files with .minin the filename.
默认情况下，MVC 捆绑器会忽略文件.min名中包含的文件。
Use the un-minified version of jQuery to fix the problem (or just rename the file) - when deployed, the bundler will minify the jQuery file anyway.
使用未缩小版本的 jQuery 来解决问题（或只是重命名文件） - 部署后，捆绑器无论如何都会缩小 jQuery 文件。
Update
更新
You can change this behavior by clearing the IgnoreListin the RegisterBundlesmethod (but I recommend sticking with the defaults and simply renaming the files):
您可以通过清除方法IgnoreList中的来更改此行为RegisterBundles（但我建议坚持使用默认值并简单地重命名文件）：
// Clear all items from the ignore list to allow minified CSS and JavaScript
// files in debug mode
bundles.IgnoreList.Clear();
// Add back the default ignore list rules sans the ones which affect minified
// files and debug mode
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
See more in the Telerik docs.
在Telerik 文档中查看更多信息。
回答by Robert Bernstein
The problem I ran into when getting this error was due to the fact that the following statements were not in the <head>of the document, but just before the </body>tag at the end of the document.
我在收到此错误时遇到的问题是由于以下语句不在<head>文档中，而是</body>在文档末尾的标记之前。
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
Once I moved them to the <head>of my .cshtml file, everything worked fine.
一旦我将它们移到<head>我的 .cshtml 文件中，一切正常。
回答by Richard Valdivieso
Just use @section scripts around your scripts like so
只需像这样在脚本周围使用 @section 脚本
@section scripts
{
<script>
$(function () {
});
});
</script>
}
回答by kingPuppy
I struggled with this one for about an hour, almost all the solutions come down to the order and method which you call your scripts. I found the bundlers were causing problems(for me it was the ui bundler)
我在这个问题上挣扎了大约一个小时，几乎所有的解决方案都归结为您调用脚本的顺序和方法。我发现打包器引起了问题（对我来说是 ui 打包器）
Here is the order which worked for me.
这是对我有用的订单。
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/bundles/jquery-ui"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
回答by JorgenV
IE has an other syntax-checking in javascript, than Edge, Chrome and Firefox. I got same error in my code, when the BundleOptimization was turned on in my MVC application. I use AngularJS as framework, and one line screwed up the whole bundle, and made an cascading effect:
除了 Edge、Chrome 和 Firefox，IE 在 javascript 中还有其他语法检查。当在我的 MVC 应用程序中打开 BundleOptimization 时，我的代码中出现了同样的错误。我使用 AngularJS 作为框架，一行搞砸了整个 bundle，并产生了级联效果：
$http.post('/controller/action', { dto })
Removing the curly brackets {} - solved my 'missing JQuery-problem'. But that I first found by debugging in the IE (pressing F8 in debug-mode):
The JQuery-error message is misleading, but the syntax-error refers to the right line, so I could fix the error.
删除大括号 {} - 解决了我的“缺少 JQuery 问题”。但我首先通过在 IE 中调试（在调试模式下按 F8）发现：JQuery 错误消息具有误导性，但语法错误指的是正确的行，因此我可以修复错误。
