正文 ASP .NET MVC 4 之后的 JQuery答案

【问题标题】：JQuery After Body ASP .NET MVC 4正文 ASP .NET MVC 4 之后的 JQuery
【发布时间】：2012-08-09 05:11:13
【问题描述】：

我刚刚创建了一个 ASP .NET MVC 4 WebAPI 项目。

在查看默认的 _Layout.cshtml 时，我看到 jquery 脚本是在渲染主体之后插入的（而不是在头部中）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

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

这会导致错误

$ is not defined

当然，试着写

$(document).ready(function() {...}).

移动

@Scripts.Render("~/bundles/jquery")

进入 _Layout.cshtml 的 head 部分可以纠正问题，并且 jquery 可以按预期工作。

怎么了？我是不是做错了什么，Script.Render 在 _Layout.cshtml 中的默认位置是有原因的？

【问题讨论】：

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

【解决方案1】：

虽然接受的答案链接到有关如何做到这一点的详细信息，但更直接的答案如下：

_Layout.cshtml 包含该行...

@RenderSection("scripts", required: false)

...这将在视图中插入一个名为“脚本”的部分 - 例如索引.cshtml：

<p>This is Index.cshtml</p>
@section scripts {
   <script>
      $(document).ready(function() {
         alert("This script is inserted by RenderSection after jQuery script is inserted.")
      })
   </script>
}

【讨论】：

【解决方案2】：

@Scripts.Render("~/bundles/jquery") 导致 MVC 4 和 VS 2010 出现问题。当您尝试创建 jQuery 对话框时，此问题会变得更加明显。

正如 JeffN825 所说，唯一的出路是注释掉 @Scripts.Render("~/bundles/jquery")。

现在未知的是：注释掉 @Scripts.Render("~/bundles/jquery") 的后果是什么？

我正在使用以下 jquery 库：

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script>

注意：jquery-1.7.2.min.js 将不起作用。

【讨论】：

【解决方案3】：

脚本加载和执行会阻止页面的呈现。

您可以通过在页面的多个部分添加警报来看到这一点。所以建议把js文件放在页面后面。

您还可以通过在页面末尾添加 jquery 的页面脚本部分来解决您的问题。

编辑：这是 Scott Guthrie 的一篇关于剃须刀部分的文章：http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

【讨论】：

如何在我的 cshtml 文件中指定这个？
我编辑了答案，并附上了一篇解释 Razor 部分的文章的链接。
感谢您帮助我。我不得不在执行 jquery 主脚本之后将所有其他脚本推送到部分视图中。