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

标签 asp.net asp.net-mvc

我的 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

Controller 方法正在显示详细信息 View 代码:

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

最后是来自其他 ListView 的方法调用，显示数据库中的所有用户:

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

最佳答案

../ 将在您的结构中上升一个目录。所以当你在 /manage 时，它会回到根目录，但是当你在 /details/id 时，它会在你的 中寻找那些资源>/details 文件夹。

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

关于asp.net - ASP .Net MVC 5 不在新页面中加载 CSS 和 JS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31339485/

上一篇：scala - 这个操作的好名字是什么？

下一篇：Scala JUnit @BeforeClass 不执行

相关文章：

javascript - 如何将默认的 Scripts 文件夹导入到空白的 mvc4 项目中

asp.net-mvc - 唯一验证属性不适用于编辑现有元素

asp.net - IIS7 + ASP.NET 大媒体文件下载

asp.net - 对临时 ASP.NET 文件的频繁访问被拒绝

asp.net - aspnet 表 - 指定 TableCell 宽度？

c# - 在页面中异步加载用户控件

asp.net - 通过长轮询检查数据库的变化

asp.net-mvc - 流畅的验证、域和 View 模型

c# - 需要帮助为 Asp.net MVC 构建自定义 Html Helper

c# - MVC Razor WebGrid 可空复杂类型

©2024 IT工具网  联系我们