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

Question

我把使用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>

Answer 1

你可以使用section:

:

...
<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>
}

Answer 2

将其放入section scripts in .cshtml页面中，如图所示。

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

Answer 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>

Answer 4

如果脚本在页面的顶部，并且有问题，那么它可能导致页面停止或需要很长时间加载。把它们放在底部可以让页面在脚本开始工作之前完全渲染。