是否有一个简单的方法来填充一个设计的网站使用Razor网页和.NET？

Question

我正试图用.NET 5和Razor页面制作一个新闻网络应用程序，并希望展示从NewsAPI带来的所有文章。我也在使用C#，我也使用引导来进行样式设计。就像这样：

    <div class="container">
    @{
        var Articles = IndexModel.Articles; // I get this articles from logic within IndexMode.cshtml.cs
        foreach (var article in IndexModel.Articles)
        {
            <div class="card bg-dark text-white" style="background-color: black;">
                <a href="@article.Url">
                    <img class="card-img fluid" src="@article.UrlToImage" alt="Card img" style="opacity: 0.5;">
                </a>
                <div class="card-img-overlay">
                    <h5 class="card-title">@article.Title</h5>
                    <p class="card-text">@article.Description</p>
                    <p class="card-text">@article.PublishedAt</p>
                </div>
            </div>
        }
    }
</div>

很简单。但是我希望网站有多个行和结构，而不仅仅是同一引导卡的列表。

结果截图

另一种方法是一个接一个地替换所有这些条款的引用，如下所示：

<div class="container-scroller">
  <div class="main-panel">
    <div class="container">
      <div class="banner-top-thumb-wrap">
        <div class="d-lg-flex justify-content-between align-items-center ">
          <div class="d-flex justify-content-between  mb-3 mb-lg-0 text-truncate">
            <div><a href="@SEARCH_A[1].Url">
              <img
                src="@SEARCH_A[1].UrlToImage"
                alt="ArticlesRequestedElonMusk[1].image"
                class="banner-top-thumb "
                
              /></a>
            </div>
            <h5 class="m-0 font-weight-bold  ">
              @SEARCH_A[1].Title
            </h5>
          </div>
          <div class="d-flex justify-content-between mb-3 mb-lg-0 text-truncate">
            <div><a href="@SEARCH_A[2].Url">
              <img
                src="@SEARCH_A[2].UrlToImage"
                alt="ArticlesRequestedElonMusk[2].UrlToImage"
                class="banner-top-thumb"
                
              /></a>
            </div>
            <h5 class="m-0 font-weight-bold text-truncate ">
              @SEARCH_A[2].Title
            </h5>
          </div>
          <div class="d-flex justify-content-between mb-3 mb-lg-0 text-truncate">
            <div><a href="@SEARCH_A[3].Url">
              <img
                src="@SEARCH_A[3].UrlToImage"
                alt="ArticlesRequestedElonMusk[3].Title"
                class="banner-top-thumb"
              /></a>
            </div>
            <h5 class="m-0 font-weight-bold text-truncate ">
              @SEARCH_A[3].Title
            </h5>
          </div>
          <div class="d-flex justify-content-between mb-3 mb-lg-0 text-truncate">
            <div><a href="@SEARCH_A[4].Url">
              <img
                src="@SEARCH_A[4].UrlToImage"
                alt="ArticlesRequestedElonMusk[4].Title"
                class="banner-top-thumb"
              /></a>
            </div>
            <h5 class="m-0 font-weight-bold text-truncate">
              @SEARCH_A[4].Title
            </h5>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8">
          <div class="owl-carousel owl-theme" id="main-banner-carousel">
            <div class="item">
              <div class="carousel-content-wrapper mb-2">
                <div class="carousel-content">
                  <h1 class="font-weight-bold">
                    @SEARCH_A[0].Title  @* Title *@
                  </h1>
                  <h5 class="font-weight-normal  m-0">
                    @SEARCH_A[0].Description
                  </h5>
                  <p class="text-color m-0 pt-2 d-flex align-items-center">
                    <span class="fs-10 mr-1">@SEARCH_A[0].PublishedAt</span> @* Published at *@
                    <i class="mdi mdi-bookmark-outline mr-3"></i>
                    <span class="fs-10 mr-1">126</span>
                    <i class="mdi mdi-comment-outline"></i>
                  </p>
                </div>
                <div class="carousel-image" style="max-height: 100%;">
                  <img class="image-fluid" src="@SEARCH_A[0].UrlToImage" alt="an image should be here" />
                </div>
              </div>
            </div>
            <div class="item">
              <div class="carousel-content-wrapper mb-2">
                <div class="carousel-content">
                  <h1 class="font-weight-bold">
                    @SEARCH_A[5].Title
                  </h1>
                  <h5 class="font-weight-normal  m-0">
                    @SEARCH_A[5].Description
                  </h5>
                  <p class="text-color m-0 pt-2 d-flex align-items-center">
                    <span class="fs-10 mr-1">@SEARCH_A[5].PublishedAt</span>
                    <i class="mdi mdi-bookmark-outline mr-3"></i>
                    <span class="fs-10 mr-1">@SEARCH_A[5].Source</span>
                    <i class="mdi mdi-comment-outline"></i>
                  </p>
                </div>
                <div class="carousel-image img-fluid">
                  <img src="@SEARCH_A[5].UrlToImage" alt="" />
                </div>
              </div>
            </div>
            <div class="item">
              <div class="carousel-content-wrapper mb-2">
                <div class="carousel-content">
                  <h1 class="font-weight-bold">
                    @SEARCH_A[6].Title
                  </h1>
                  <h5 class="font-weight-normal  m-0">
                    @SEARCH_A[6].Description
                  </h5>
                  <p class="text-color m-0 pt-2 d-flex align-items-center">
                    <span class="fs-10 mr-1">@SEARCH_A[6].PublishedAt</span>
                    <i class="mdi mdi-bookmark-outline mr-3"></i>
                    <span class="fs-10 mr-1">@SEARCH_A[6].Source</span>
                    <i class="mdi mdi-comment-outline"></i>
                  </p>
                </div>
                <div class="carousel-image img-fluid">
                  <img src="@SEARCH_A[6].UrlToImage" alt="" />
                </div>
              </div>
            </div>

这种做法尊重网站的原始设计和布局，但：

• 我必须确保有足够的文章来填充现有的布局，否则可能出现空引用异常
• 如果我在哪里更改任何参考的确定的文章，它将很有可能打破其他的。

下面是我对同一循环中的两列的解决方案：

var NounList = articles.Where(a => a.Id % 2 != 0).ToList();
var PairList = articles.Where(a => a.Id % 2 == 0).ToList();

            for (int i = 0; i <= (articles.Count / 2) - 1; i++)
            {
                <div class="card-group">
                    <div class="card">
                        <a href="@NounList[i].Url">
                        <img src="@NounList[i].UrlToImage" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">@NounList[i].Title</h5>
                            <p class="card-text">@NounList[i].Description</p>
                            <p class="card-text"><small class="text-muted">@NounList[i].PublishedAt</small></p>
                        </div>
                        </a>
                    </div>
                    <div class="card">
                        <a href="@PairList[i].Url">
                        <img src="@PairList[i].UrlToImage" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">@PairList[i].Title</h5>
                            <p class="card-text">@PairList[i].Description</p>
                            <p class="card-text"><small class="text-muted">@PairList[i].PublishedAt</small></p>
                        </div>
                        </a>
                    </div>
                </div>
            }

有没有一种最简单的方法来填充数据--使用Razor和.NET设计的网站？

Answer 1

要使用引导程序创建您想要的布局，您需要创建一个容器()。接下来，创建一个行()。然后，添加所需的列数(带有适当. of classes的标记)。请注意，对于每一行，..col中的数字应该总是加起来为12。

例如，如果要在一行中显示四列，请使用以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    body {
        text-align: center;
        text-transform: uppercase;
        padding: 50px 0;
    }

    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #aaa;
        margin: 20px 0;
        padding: 10px;
        width: 100%;
        min-height: 200px;
        border: 2px #ccc solid;
        color: darkblue;
    }
</style>

<!-- 4 columns -->
<h3>4 Columns</h3>
<div class="container">
    <div class="row">

        <div class="col-3">
            <div class="box">
                <div class="card">
                    <span> ... card content</span>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="box">
                <div class="card">
                    <span> ... card content</span>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="box">
                <div class="card">
                    <span> ... card content</span>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="box">
                <div class="card">
                    <span> ... card content</span>
                </div>
            </div>
        </div>

    </div>
</div>

结果如下：

​

​

更详细的信息，请参阅以下链接：

自举栅格

具有多个断点的引导4列

自举响应卡缩略图