ASP .Net MVC 5 不在新页面中加载 CSS 和 JS 文件

Question

我的 CSS 和 JS 在 ASP.Net MVC 5 中出现渲染问题。 在我的 _layout.cshtml 中，我包含了带有“链接”和“脚本”标签的分配 CSS 和 JS。
我正在尝试在新页面中显示用户详细信息，但页面仅包含文本且未加载任何 CSS 和 JS 文件。

型号代码：

public class DetailViewModel
{
   public ApplicationUser User { get; set; }
}

查看代码：

@model WebApplication1.Models.DetailViewModel
<h2>Detaisl</h2>

@Model.User.UserName

控制器方法正在显示详细信息视图代码：

[HttpGet]
public ActionResult Details(string id)
{
   DetailViewModel model = new DetailViewModel();
   model.User = UserManager.FindById(id);
   return View(model);
}

最后是来自其他列表视图的方法调用，显示 db 中的所有用户：

@Html.ActionLink("Details", "Details", new {id = item.User.Id})

结果是一个包含文本但缺少所有 CSS 和 JS 文件的页面。 我做错了什么？这是我的逻辑错误吗，我是网络开发的新手。只是试图在新页面上显示用户属性。

_layout.cshhtm

@using WebApplication1.Helper.Const

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../Content/ace/assets/css/bootstrap.css" />
<link rel="stylesheet" href="../Content/ace/assets/css/font-awesome.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="../Content/ace/assets/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="../Content/ace/assets/css/ace.css"
      class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="../Content/ace/assets/css/ace-part2.css" class="ace-main-stylesheet" />
<![endif]-->
<!--[if lte IE 9]>
  <link rel="stylesheet" href="../Content/ace/assets/css/ace-ie.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="../Content/ace/assets/js/ace-extra.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="../Content/ace/assets/js/html5shiv.js"></script>
<script src="../Content/ace/assets/js/respond.js"></script>
<![endif]-->
<!--Google char API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>

<body class="no-skin">
<!-- #section:basics/navbar.layout -->
<div id="navbar" class="navbar navbar-default">
    <script type="text/javascript"> try { ace.settings.check('navbar', 'fixed') } catch (e) { } </script>
    <div class="navbar-container" id="navbar-container">
        <!-- #section:basics/sidebar.mobile.toggle -->
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- /section:basics/sidebar.mobile.toggle -->
        <div class="navbar-header pull-left">
            <!-- #section:basics/navbar.layout.brand -->
            <a href="@Url.Action("Index", "Home")" class="navbar-brand">
                <small><i class="fa fa-leaf"></i> @Views.appName @Views.appTitle</small>
            </a><!-- /section:basics/navbar.layout.brand -->
            <!-- #section:basics/navbar.toggle -->
            <!-- /section:basics/navbar.toggle -->
        </div>
        <!-- #section:basics/navbar.dropdown -->
        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <!-- #section:basics/navbar.user_menu -->
                <li class="light-blue">
                    @Html.Partial("_LoginPartial")
                </li><!-- /section:basics/navbar.user_menu -->
            </ul>
        </div><!-- /section:basics/navbar.dropdown -->
    </div><!-- /.navbar-container -->
</div>
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <script type="text/javascript"> try { ace.settings.check('main-container', 'fixed') } catch (e) { } </script>
    <!-- #section:basics/sidebar -->
    @Html.Partial("_MenuPartial")<!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <!-- #section:basics/content.breadcrumbs -->
            @Html.Partial("_BreadcrumbsPartial")<!-- /section:basics/content.breadcrumbs -->
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        @RenderBody()<!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div><!-- /.main-content-inner -->
    </div><!-- /.main-content -->
    <!-- footer -->
    <div class="footer">
        <div class="footer-inner">
            <!-- #section:basics/footer -->
            <div class="footer-content">
                <span>
                    @Views.appName <span class="blue bolder">@Views.appTitle</span> &copy; 2015
                </span>
            </div> <!-- /section:basics/footer -->
        </div>
    </div>
    <!-- slide to top button -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='../Content/ace/assets/js/jquery.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../Content/ace/assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='../Content/ace/assets/js/jquery.mobile.custom.js'>" + "<" + "/script>");
</script>
<script src="../Content/ace/assets/js/bootstrap.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
    <script src="../Content/ace/assets/js/excanvas.js"></script>
<![endif]-->
<!-- ace scripts -->
<script src="../Content/ace/assets/js/ace/elements.scroller.js"></script>
<script src="../Content/ace/assets/js/ace/elements.colorpicker.js"></script>
<script src="../Content/ace/assets/js/ace/elements.fileinput.js"></script>
<script src="../Content/ace/assets/js/ace/elements.typeahead.js"></script>
<script src="../Content/ace/assets/js/ace/elements.wysiwyg.js"></script>
<script src="../Content/ace/assets/js/ace/elements.spinner.js"></script>
<script src="../Content/ace/assets/js/ace/elements.treeview.js"></script>
<script src="../Content/ace/assets/js/ace/elements.wizard.js"></script>
<script src="../Content/ace/assets/js/ace/elements.aside.js"></script>
<script src="../Content/ace/assets/js/ace/ace.js"></script>
<script src="../Content/ace/assets/js/ace/ace.ajax-content.js"></script>
<script src="../Content/ace/assets/js/ace/ace.touch-drag.js"></script>
<script src="../Content/ace/assets/js/ace/ace.sidebar.js"></script>
<script src="../Content/ace/assets/js/ace/ace.sidebar-scroll-1.js"></script>
<script src="../Content/ace/assets/js/ace/ace.submenu-hover.js"></script>
<script src="../Content/ace/assets/js/ace/ace.widget-box.js"></script>
<script src="../Content/ace/assets/js/ace/ace.settings.js"></script>
<script src="../Content/ace/assets/js/ace/ace.settings-rtl.js"></script>
<script src="../Content/ace/assets/js/ace/ace.settings-skin.js"></script>
<script src="../Content/ace/assets/js/ace/ace.widget-on-reload.js"></script>
<script src="../Content/ace/assets/js/ace/ace.searchbox-autocomplete.js></script>
</body>
</html>

Answer 1

../ 将在您的结构中上升一个目录。因此，当您在 /manage 上时，它会回到根目录，但当您在 ​​/details/id 上时，它将在您的 /details 文件夹中查找这些资源。

将../ 替换为~/，这将查找相对路径。

Answer 2

您正在使用 JS 和 CSS 文件的相对路径。

尝试将路径更改为绝对路径 url 或使用 UrlHelper 类。

@Url.Content("~/Content/ace/assets/css/font-awesome.css")

Answer 3

最好将同一目录中的东西捆绑起来，使其比普通编译更快...请使用

~/ 而不是 ../

用于捆绑：

转到：project_name -> bundleconfig.cs

一旦你访问你就会明白... :D