带有 .NET Core 和引导程序的标题图像

Question

我开始在 .net core 2.0 中学习代码，作为第一个应用程序，我决定编写一个简单的博客系统。当我想将不同的标题背景图像放置到每个帖子详细信息页面和索引页面上的主要页面时，我遇到了一个问题。图像通过 ViewData["Image"] 传递给 _Layout。我尝试将相同的图像放在索引和详细信息视图中，但图像仅显示在索引页面上。

索引视图

@model PaginatedList<MHBlog.Models.Post>
@{
    ViewData["Title"] = "Index";
    ViewData["Image"] = "11.jpg";
}
<h2>Index</h2>

详情查看

@model MHBlog.Models.Post
@{
    ViewData["Title"] = "Index";
    ViewData["Image"] = Model.ImageName;
}
<h2>Details</h2>

_布局

<header class="masthead" style="background-image: url(images/@ViewData["Image"])">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="post-heading">
                    <h1>Blog</h1>
                    <span class="subheading">My First Blog</span>
                </div>
            </div>
        </div>
    </div>
</header>

CSS

header.masthead {
  margin-bottom: 50px;
  background: no-repeat center center;
  background-color: #777777;
  background-attachment: scroll;  
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
  padding: 200px 0 150px;
  color: white; }
@media only screen and (min-width: 768px) {
  header.masthead .page-heading,
  header.masthead .post-heading,
  header.masthead .site-heading {
    padding: 200px 0; } }
header.masthead .page-heading,
header.masthead .site-heading,
header.masthead .post-heading{
  text-align: center;
}
header.masthead .page-heading h1,
header.masthead .site-heading h1 {
  font-size: 50px;
  margin-top: 0; }
header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  display: block;
  margin: 10px 0 0;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
@media only screen and (min-width: 768px) {
  header.masthead .page-heading h1,
  header.masthead .site-heading h1 {
    font-size: 80px; } }
header.masthead .post-heading h1 {
  font-size: 35px; }
header.masthead .post-heading .meta,
header.masthead .post-heading .subheading {
  line-height: 1.1;
  display: block; }
header.masthead .post-heading .subheading {
  font-size: 24px;
  font-weight: 600;
  margin: 10px 0 30px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
header.masthead .post-heading .meta {
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  font-family: 'Lora', 'Times New Roman', serif; }
header.masthead .post-heading .meta a {
  color: white; }
@media only screen and (min-width: 768px) {
  header.masthead .post-heading h1 {
    font-size: 55px; }
header.masthead .post-heading .subheading {
  font-size: 30px; } }

索引页面：

详情页：

我尝试将详细信息 ViewData Image 设置为 @ViewData["Image"] = "11.jpg"

但详情页面上没有任何变化。

Answer 1

试试style="background-image:url('/images/@ViewData["Image"]')"。

<header class="masthead" style="background-image:url('/images/@ViewData["Image"]')">
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-heading">
                <h1>Blog</h1>
                <span class="subheading">My First Blog</span>
            </div>
        </div>
    </div>
</div>