在 MVC 中添加脚本答案

【问题标题】：Adding scripts in MVC在 MVC 中添加脚本
【发布时间】：2014-05-01 11:40:05
【问题描述】：

我从第一个 MVC 应用程序开始。在这里，我有基本的困惑。实际上创建的默认 _Layout.cshtml 文件如下所示

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

</head>
<body>
    <script>

    </script>
    @RenderBody()

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

我使用的是基本模板，所以没有任何模板。但请检查 '@Scripts.Render("~/bundles/jquery")' 行。它在@RenderBody() 之后。所以它实际上是在正文部分之后添加的。

我认为这实际上是最佳实践。但是如果我添加 $.(document).ready 它会显示以下错误

Microsoft JScript 运行时错误：“$”未定义

基于错误，它是由于脚本标签。我只是将 '@Scripts.Render("~/bundles/jquery")' 行移到了@Render body 和最后一页之前

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

</head>
<body>
    <script>

    </script>
    @RenderBody()      
    @RenderSection("scripts", required: false)
</body>
</html>

applicationw 与我的 jquery 配合得很好。

那么为什么会这样呢？所以总是在 @RenderBody 之前添加标签的脚本？那为什么默认模板显示在错误的位置？

【问题讨论】：

感谢 satpal 的编辑。我实际上正在编辑。
jQuery 未加载，因此您收到错误 '$' is undefined。当您在 head 部分移动 @Scripts.Render("~/bundles/jquery") 时，首先加载 jquery，然后执行代码
默认模板这样构造是有原因的。将 jQuery 包移到头部将解决您的问题，但会在客户端引入其他问题（想想 UX）。您应该听取@Ufuk Hacıoğulları 的建议

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

【解决方案1】：

jQuery 应该在头部，您编写的任何自定义脚本都应该在主体之后的底部。

这是因为如果你在你的 body 中使用了任何 jQuery 并且它没有被包裹在一个 document.ready 中，它会在 jQuery 被加载之前尝试执行并且你会收到一个 $is undefined 错误

【讨论】：

【解决方案2】：

这可能是因为您在页面中的 jQuery 引用之前添加了脚本。您需要在视图中的 scripts 部分中编写脚本：

@section scripts {
    //stuff
}

这将确保它将在 jQuery 引用（RenderSection 调用）之后呈现。

【讨论】：

解决方案可选地添加自定义脚本如果脚本被定义，检查this

【解决方案3】：

@Scripts.Render 不会在脚本部分呈现脚本。它在进行调用的地方呈现适当的脚本标签。

为了实现你所追求的，这几乎是我使用的布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")    
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    <script>
        $(function() {
        });
    </script>
    @RenderSection("scripts", required: false)
</body>
</html>

同样，@RenderSection 在使用此布局的视图中很有用，在这种情况下可以这样使用：

@section scripts {
    <script>
        $(function() {
        });
    </script>
}

通常建议不要在正文中使用内联脚本，因此按此顺序在底部渲染 jQuery 可以正常工作。

【讨论】：