在 MVC5 模板中,在默认 link localhost:port/home 中正确加载,但在 localhost:port/home/view 中不正确加载

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

我是 MVC5 的新手。我在 MVC 项目中添加 HTML 模板。我在 visual studio 2015 年创建了一个 mvc5 的默认项目,然后我创建了主布局和控制器加视图。当我执行我的项目时,它会正确加载我的整个模板及其 css 和 js 文件。但是每当我随机播放我的视图时,我的页面都会以正确的样式导航到它的视图,但我不知道为什么我的 js 没有正确加载。我在控制台中没有错误。

这是我的代码: 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>

导航代码在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();
}

屏幕截图: enter image description here enter image description here

我自己解决了这个问题,我想分享我的研究,这段代码中的错误是错误的层次结构。

首先,我必须渲染我的 js 文件和 _Layout 的结尾,其次,我需要为我的内容脚本创建 @Section。此层次结构解决了我的问题。

_Layout.cs 在我的页面末尾:

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

Dashboard.cs
我的 dashboard.cs 页面底部的内容视图:

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