为啥 Asp.Net MVC 5 将 @Scripts.Render("~/bundles/jquery") 放在 _Layout.cshtml 的底部？

Posted 2023-05-09

【中文标题】为啥 Asp.Net MVC 5 将 @Scripts.Render("~/bundles/jquery") 放在 _Layout.cshtml 的底部？

【英文标题】：Why Asp.Net MVC 5 put @Scripts.Render("~/bundles/jquery") at the bottom in _Layout.cshtml?为什么 Asp.Net MVC 5 将 @Scripts.Render("~/bundles/jquery") 放在 _Layout.cshtml 的底部？

【发布时间】：2014-10-16 23:57:45

【问题描述】：

我将使用 jQuery 的 <script> 块放在一个（也是唯一一个）使用模板的 cshtml 文件的正文中，由于尚未加载 jQuery，它们会导致错误。

将@Scripts.Render("~/bundles/jquery") 放在_Layout.cshtml 文件的底部有什么意义？

_Layout.cshtml的底部。

    @RenderBody()
    <hr />
    <footer>
    </footer>
</div>

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

下面是生成的cshtml文件的源码。

<script>
    $(document).ready(function ()  /// $ not defined.
        // .....
    );
</script>

    <hr />
    <footer>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>

【参考方案1】：

您可以使用部分：

在你的布局中：

...
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
@RenderSection("scripts", required: false)
...

在你的 cshtml 中：

@section scripts 
    <script>
        $(document).ready(function ()  /// $ not defined.
            // .....
        );
    </script>

【讨论】：

只是为了澄清。请注意，脚本已在您将要调用的部分之前呈现。因此，本节中调用的所有内容都可以访问所有这些脚本。

【参考方案2】：

只需将其包含在 .cshtml 页面中的 section scripts 中即可，如图所示。

@section scripts
  <script>
  $(document).ready(function ()  
    // .....
  );
  </script>

【参考方案3】：

最好在每个可能的 HTML 元素之后加载 javascript 文件。

知道了这一点，我会在加载所有库后放置您的文档就绪处理程序。

 <hr />
    <footer>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script>
    $(document).ready(function ()  /// $ not defined.
        // .....
    );
</script>

【讨论】：

但我只需要在一页中插入<script> 块（cshtml 文件使用模板）。修改Layout.cshtml会影响所有使用该模板的页面。

【参考方案4】：

如果脚本位于页面顶部，并且出现问题，则可能会导致页面停止/加载时间过长。将它们放在底部可以让页面在您的脚本开始工作之前完全呈现。