I want to be able to call external js file in mvc 5 _layout page, i have done a few researches on google, but no success, below is my code in the _Layout Head section:

<!-- 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)

Then at the bottom of the _Layout page i have this:

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

In the View, i have this:

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

Please i will appreciate i someone could assist in suggesting what to do. thanks

I want to be able to call external js file in mvc 5 _layout page, i have done a few researches on google, but no success, below is my code in the _Layout Head section:

<!-- 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)

Then at the bottom of the _Layout page i have this:

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

In the View, i have this:

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

Please i will appreciate i someone could assist in suggesting what to do. thanks

• javascript
• asp-mvc

• u can use requirejs for more concretae app with – sakir Commented Oct 26, 2015 at 8:21

2 Answers 2

move

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

to before its dependencies

i.e.

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

requires JQuery.js

but you load it after. So moving the include of JQuery above the script which required it, will fix that issue.

Please apply this to all scripts and their dependencies

Just like in normal HTML:

<script type="text/javascript" src="http://link-to-external-javascript-file.js"></script>