共享布局视图不适用于 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 请求

如何从控制器告诉 ASP.NET Core 视图存在?

JS Fetch API 不适用于具有 Authorize 属性的 ASP.NET Core 2 控制器

IdentityServer3 注销功能不适用于 ASP.NET Core 客户端

ASP.NET Core MVC 视图

如何在 ASP.NET CORE Razor Pages 中创建共享表单?