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

时间：2015-07-10 11:20:48

标签： asp.net asp.net-mvc

我在ASP.Net MVC 5中使用CSS和JS渲染问题。 在我的_layout.cshtml中，我已经包含了分配CSS和JS以及＃34; link＆＃34;和＆＃34;脚本＆＃34;标签。
我试图在新页面中显示用户详细信息，但页面只包含文本，并且没有加载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>

3 个答案:

答案 0 :(得分：3)

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

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

答案 1 :(得分：1)

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

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

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

答案 2 :(得分：0)

最好将捆绑在同一目录中的东西捆绑起来，使其比正常编译更快...并且请使用

  

〜/而不是../

用于捆绑：

  

转到：project_name - ＆gt; bundleconfig.cs

一旦你访问，你就会明白......：D

相关问题
最新问题