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

您可以使用以下部分：

布局中的

：

...
<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内的.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

如果脚本位于页面顶部，并且存在问题，则可能导致页面停止/需要很长时间加载。将它们放在底部允许页面在脚本开始工作之前完全呈现。

为什么Asp.Net MVC 5在@Layout.cshtml的底部放置@ Scripts.Render（＆＃34;〜/ bundles / jquery＆＃34;）？

4 个答案: