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

Share Improve this question Follow edited Oct 26, 2015 at 8:14 m4n0 32.4k2828 gold badges8080 silver badges9696 bronze badges asked Oct 26, 2015 at 8:12 UwakPeterUwakPeter 34122 gold badges77 silver badges2727 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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>