使用.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> 

_layout

<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图像到 @ViewData [ “形象”] = “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>