ASP.NET Core 101 - Styling a Razor Page [6 of 13]

we're going to do @ and then retrieve the image property that we set when making the product.

<div class="card-columns">
  @foreach (var product in Model.Products) 
  {
  <div class="card">
    <div class="card-img" style="background-image: ur1('@product.Image');height:200px;" >
      <div class="card-body">
        <h5 class="card-title">@product.Titles</h5>
      </div>
    </div>
  </div>
  }
</div>

When I say @, I've just switched from HTML into Razor or into C Sharp.
So I can say product, in which variables that coming from? That's actually coming from here(var product).Because we're inside the foreach loop.

_Layout

That will introduce actually a new concept. If we go over(仔细检查; 认真讨论; 用心思考;) here to our pages.We've been doing all this work in one page. Because this is just the index page.But what if we wanted to apply all of this to just the whole website in general? To every page. If I look at index.cshtml,there's only two divs here

and some other stuff.But over here, we have a whole website. Where's all that stuff located?

I believe there is a file that exists called layout and you click on that. So this is all the HTML but you will see on every single page that you create regardless. So you can find all of this including the corresponding(符合的; 相应的; ) CSS on the index page,the error page, any other page that you create and write there. So any page that is using that shared ones.

So by default unless you override it,you're going to be a part of that layout page.
Well, our page gets rendered(渲染) here in the middle of render body.

 <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>