堆棧內存溢出
  簡體   English   中英

ASP .Net MVC 5不會在新頁面中加載CSS和JS文件

[英]ASP .Net MVC 5 don't load CSS and JS files in new page

 原文  2015-07-10 11:20:47  7   3    asp.net/ asp.net-mvc

問題描述

我在ASP.Net MVC 5中的CSS和JS出現渲染問題。在_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文件。 我做錯了什么？ 這是我的邏輯錯嗎，我是Web開發的新手。 只是嘗試在新頁面上顯示用戶屬性。

_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 個解決方案

解決方案1
 4 已采納  2015-07-10 11:51:08

../將在您的結構中上../一個目錄。 因此，當您使用/manage ，它將回到根目錄，但是當您使用/details/id ，它將在/details文件夾中查找那些資源。

將../替換為~/ ，這將尋找相對路徑。

解決方案2
 1  2015-07-10 11:29:42

您正在使用JS和CSS文件的相對路徑。

嘗試將路徑更改為其絕對url或使用UrlHelper類。

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

解決方案3
 0  2015-07-10 14:03:53

最好將同一目錄中的內容捆綁在一起，以使其比普通編譯更快...請使用

〜/代替../

用於捆綁：

轉到：project_name-> bundleconfig.cs

一旦您訪問...，您就會知道...：D

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 布局頁面不加載CSS（asp.net mvc） ASP.NET MVC5我不想合並CSS文件 新的ASP.Net MVC3項目，不會從Scripts文件夾加載文件 Page_Load中的新userControl在Webform中沒有CSS 在ASP.NET MVC中管理js和CSS文件 為什么 CSS 和 JS 文件繞過 Asp.Net MVC 路由？ 管理ASP .NET母版頁中css / js文件的相對路徑 頁面加載中的Asp.Net MVC路由 ASP.Net MVC頁面加載 使用AJAX的ASP.NET MVC加載頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM