javascript - 如何在 MVC 5 _Layout 页面中加载外部 Javascript 文件

Question

我希望能够在mvc 5 _layout页面中调用外部js文件，我在google上做了一些研究，但没有成功，下面是我在_Layout Head部分的代码:

<!-- start: MAIN JAVASCRIPTS -->
    <!--[if lt IE 9]>
        <script src="~/assets/plugins/respond.min.js"></script>
        <script src="~/assets/plugins/excanvas.min.js"></script>
        <script type="text/javascript" src="~/assets/plugins/jQuery-lib/1.10.2/jquery.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js")"></script>
    <!--<![endif]-->
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap/js/bootstrap.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/blockUI/jquery.blockUI.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/iCheck/jquery.icheck.min.js")"></script>

    <!-- end: MAIN JAVASCRIPTS -->

    <script>
        jQuery(document).ready(function () {
            Main.init();
            Index.init();
        });
    </script>

    @RenderSection("JavaScript", required : false)
    @RenderSection("CSS", required : false)

然后在 _Layout 页面的底部我有这个:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/assets/plugins")
@RenderSection("Scripts", required : false)

在 View 中，我有这个:

@section JavaScript
{

<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script type="text/javascript" src="@Url.Content("~/assets/plugins/flot/jquery.flot.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/flot/jquery.flot.pie.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/flot/jquery.flot.resize.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery.sparkline/jquery.sparkline.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/fullcalendar/fullcalendar/fullcalendar.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/js/index.js")">

</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
}

请有人能协助建议该怎么做，我将不胜感激。谢谢

Answer 1

移动

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

到其依赖项之前

即

<script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>

需要 JQuery.js

但是你之后加载它。因此，将 JQuery 的包含移到需要它的脚本上方，将解决该问题。

请将此应用于所有脚本及其依赖项