在 ASP.NET MVC4 项目中包含 jquery 的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17536509/
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
Proper way to include jquery in a ASP.NET MVC4 project
提问by
I'm new to ASP.NET MVC 4 and I would like to add a jquery control in one of the pages of my project.
我是 ASP.NET MVC 4 的新手，我想在我的项目的其中一个页面中添加一个 jquery 控件。
Here is the end part of my _layout.cshtml file :
这是我的 _layout.cshtml 文件的结尾部分：
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
1. What exactly does the @Script.Render("~/bundles/jquery") line ?
1. @Script.Render("~/bundles/jquery") 行到底是什么？
Inside the page where I want my control added :
在我想要添加控件的页面内：
@{
ViewBag.Title = "Test page";
}
@section scripts
{
@Scripts.Render("~/Scripts/jquery-1.8.2.js") // The control needs jquery.
@Scripts.Render("~/Scripts/icarousel.min.js") // The control in question.
@Styles.Render("~/Content/icarousel.css") // A css file needed by the control.
}
<script type="text/javascript">
$(document).ready(function () {
$('#icarousel').iCarousel();
});
</script>
(some html code here, including the #icarousel div ... )
When I run that page, I get the error : '$' is undefined.
当我运行该页面时，出现错误：'$' is undefined。
It's like jquery is not loaded or something ...
就像未加载 jquery 或其他什么...
2. What am I missing to make this work ?
2. 我还缺少什么才能完成这项工作？
采纳答案by Joe Enos
You're putting the jQuery scripttag at the very bottom of the body, but trying to use it at the top of your file. Everything runs top-to-bottom, so it's trying to use something that hasn't loaded yet.
您将 jQueryscript标记放在正文的最底部，但试图在文件的顶部使用它。一切都是从上到下运行的，所以它试图使用尚未加载的东西。
Check out the rendered HTML source to see exactly what it looks like.
查看呈现的 HTML 源代码以确切了解它的外观。
You should probably render your scripts section (specifically the ones that point to javascript files rather than inline script) inside the head, rather than the body.
您可能应该在head. 而不是正文中呈现您的脚本部分（特别是那些指向javascript文件而不是内联脚本的部分）。
回答by Claudio Redi
What exactly does the @Script.Render("~/bundles/jquery") line ?
@Script.Render("~/bundles/jquery") 行到底是什么？
Go to App_Start -> BundleConfig. Inside that file you'll see something like this
去App_Start -> BundleConfig。在该文件中，您会看到类似这样的内容
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. You can create CSS, JavaScript and other bundles. Fewer files means fewer HTTP requests and that can improve first page load performance
捆绑是 ASP.NET 4.5 中的一项新功能，可以轻松地将多个文件合并或捆绑到一个文件中。您可以创建 CSS、JavaScript 和其他包。更少的文件意味着更少的 HTTP 请求，这可以提高首页加载性能
What am I missing ?
我错过了什么？
You don't need your jquery declaration on your page as @Script.Render("~/bundles/jquery")is already redering a reference to your jquery file. You should remove that.
您不需要在您的页面上使用 jquery 声明，因为@Script.Render("~/bundles/jquery")已经重新创建了对 jquery 文件的引用。你应该删除它。
Be sure to place any jquery code afterlibrary reference.
确保在库引用之后放置任何 jquery 代码。
回答by Oleksii Aza
@Scripts.Render("~/bundles/jquery")is mechanism of asp.net mvc 4 that bandles and minifies your scripts.
@Scripts.Render("~/bundles/jquery")是 asp.net mvc 4 的机制，它可以打包和缩小您的脚本。
Try to relocate @Scripts.Render("~/bundles/jquery") as high as possible between head tags. Something like this on your _Layout.cshtml:
尝试在 head 标签之间重新定位 @Scripts.Render("~/bundles/jquery") 尽可能高的位置。在你的 _Layout.cshtml 上是这样的：
<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/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
