In MVC5 template load properly on default link localhost:port/home but not in localhost:port/home/view

I am new in MVC5. I am adding HTML template in MVC project. I create a default project of mvc5 in visual studio 2015 and then i create Master Layout and controller plus view. When i execute my project it loads my whole template properly with its css and js files. But whenever i shuffle my view, my page navigate to its view with proper styling but i dont know why my js didn't load properly. I got no errors in console.

Here is my code: RouteConfig.cs

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "AdminDashboard", action = "Index", id = UrlParameter.Optional }
            );

AdminPanel.cshtml

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>
    <!-- Global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/assets/")css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/assets/")css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/assets/")css/core.css" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/assets/")css/components.css" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/assets/")css/colors.css" rel="stylesheet" type="text/css">
    <!-- /global stylesheets -->
    <!-- Core JS files -->
    <script type="text/javascript" src="@Url.Content("~/assets/")js/plugins/loaders/pace.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/")js/core/libraries/jquery.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/")js/core/libraries/bootstrap.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/")js/plugins/loaders/blockui.min.js"></script>
    <!-- /core JS files -->
    @*@Styles.Render("~/Assets/css")
        @Scripts.Render("~/Assets/js")*@

</head>

Navigation Code in AdminPanel.cshtml

  <div class="sidebar-category sidebar-category-visible">
                        <div class="category-content no-padding">
                            <ul class="navigation navigation-main navigation-accordion">
                                <!-- Main -->
                                <li class="navigation-header"><span>Main</span> <i class="icon-menu" title="Main pages"></i></li>
                                <li><a href="~/home"><i class="icon-home4"></i> <span>Dashboard</span></a></li>
                                <li><a href="~/home/about"><i class="icon-home4"></i> <span>abc</span></a></li>
                                <li>
                                    <a href="#"><i class="icon-stack2"></i> <span>Page layouts</span></a>
                                    <ul>
                                        @*   <li><a href="~/HRSetup/Department">EmptyPage</a></li>*@
                                        <li>@Html.ActionLink("Department", "Department", "AdminDashboard")</li>
                                    </ul>
                                </li>
</ul>
</div>
</div>

AdminDashboardController.cs:

public ActionResult Department()
{
    return View();
}

ScreenShots: enter image description here enter image description here

Solution

I solved this issue by my self and I want to share my research, the error in this code was bad hierarchy.

Firstly i have to render my js files and the end of my _Layout and secondly I need to create @Section for my content scripts. This hierarchy resolve my problem.

_Layout.cs at the end of my page:

    @Scripts.Render("~/Assets/js")
    <!-- /core JS files -->
    @RenderSection("Script", required: false)
</body>
</html>

Dashboard.cs
Content View at the bottom of my dashboard.cs page:

  @section Script{
        <!-- Theme JS files -->
        <script type="text/javascript" src="~/assets/js/plugins/visualization/d3/d3.min.js"></script>
        <script type="text/javascript" src="~/assets/js/plugins/visualization/d3/d3_tooltip.js"></script>
        <script type="text/javascript" src="~/assets/js/plugins/forms/styling/switchery.min.js"></script>
        <script type="text/javascript" src="~/assets/js/plugins/forms/styling/uniform.min.js"></script>
        <script type="text/javascript" src="~/assets/js/plugins/forms/selects/bootstrap_multiselect.js"></script>
        <script type="text/javascript" src="~/assets/js/plugins/ui/moment/moment.min.js"></script>
        <script type="text/javascript" src="~/assets/js/plugins/pickers/daterangepicker.js"></script>
        <script type="text/javascript" src="~/assets/js/core/app.js"></script>
        <script type="text/javascript" src="~/assets/js/pages/dashboard.js"></script>
        <!-- /theme JS files -->
    }