小贝子编程

asp.net MVC 5不能在新页面加载CSS和JS文件



我在ASP中呈现CSS和JS的问题。asp.net MVC 5。在我的_layout。我已经包含了分配CSS和JS与"链接"one_answers"脚本"标签。
我试图在新页面中显示用户详细信息，但页面只包含文本，没有CSS和JS文件已加载。

模型代码:

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

视图代码:

@model WebApplication1.Models.DetailViewModel
<h2>Detaisl</h2>
@Model.User.UserName

控制器方法显示Details视图代码:

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

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

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

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

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

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

最好将同一目录下的东西捆绑在一起，以使其比正常编译更快…请使用

~/代替…/

用于绑定:

转到:project_name -> bundlecconfig .cs

一旦你参观了……你就会明白了。: D

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium