共享布局视图不适用于 ASP.NET Core 2.1 中的所有视图
Posted
技术标签:
【中文标题】共享布局视图不适用于 ASP.NET Core 2.1 中的所有视图【英文标题】：Shared Layout view not applying to all views in ASP.NET Core 2.1 【发布时间】：2019-06-02 11:08:59 【问题描述】：布局视图未在其他视图之间共享 目前我的主页和其他主页共享我的布局视图，但是其他页面（例如登录页面）共享视图，但没有样式或图像。还有我的主页，例如关于删除等所有杂乱无章的功能也删除了样式，有人知道如何将它们链接在一起吗？ Actual View of login page and Home Page 登录.cshtml
@page
@model LoginModel
@
ViewData["Title"] = "Log in";
<h2>@ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
@section Scripts
<partial name="_ValidationScriptsPartial" />
Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="post.html">Sample Post</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core javascript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
【问题讨论】：
正如@hiiru 提到的，问题是相对论之一。您必须了解服务器不会呈现您的 CSS，浏览器会。并且浏览器根据当前 URL 引用 CSS。一种选择是使用根相对标记“~/blah/blah/blah.css”。这仅适用于 (IIRC) MVC4 以来的 MVC 版本，但由于您使用的是核心，所以应该没问题。 【参考方案1】：在您的 Layout.cshtml 中，css 文件的路径是相对的。 将它们更改为绝对（通过在 CSS 路径中添加前导 /），它应该可以工作。
问题是主页面在/，所以css目录是/css。 但是其他页面可能位于 /Account/Login，因此 CSS 目录将是 /Account/Login/css（这是错误的）
假设文件夹 /css 和 /vendor 是正确的：
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
最后的 JS 脚本也是如此：
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
【讨论】：
更好的方法是用户站点根目录相对寻址 ~/foo，如果将站点移动到子应用程序中，这将有所帮助。另一种选择是使用内容帮助器 (@Html.Content("~/...") 仅在旧版本的 Razer (pre-mvc4) 上是必需的。 @ErikFunkenbusch 你是对的，感谢您的意见。我更新了我的代码示例以上是关于共享布局视图不适用于 ASP.NET Core 2.1 中的所有视图的主要内容，如果未能解决你的问题，请参考以下文章
模型绑定不适用于 ASP.NET Core 2 WebAPI 中的 POST 请求
JS Fetch API 不适用于具有 Authorize 属性的 ASP.NET Core 2 控制器