有没有一种简单的方法可以使用 Razor Pages 和 .NET 填充设计的网站？答案

【问题标题】：Is there a simple way to fill a designed website using Razor Pages and .NET?有没有一种简单的方法可以使用 Razor Pages 和 .NET 填充设计的网站？
【发布时间】：2021-09-18 08:38:52
【问题描述】：

我正在尝试使用 .NET 5 和 Razor Pages 制作新闻 Web 应用程序，并希望显示从 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>

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

Screenshot of result

另一种方法就是将这些文章的所有引用逐一替换，如下所示：

<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 Pages 和 .NET 为设计的网站填充数据？

【问题讨论】：

欢迎来到 SO。对你来说什么是“简单”？您尝试了什么，为什么它太复杂了？
取决于设计和网站，我应该认为。我的意思是，如果一个设计需要数百个用户可配置的小部件放置在页面上用户想要的任何位置（在预设限制内，natch），那将比具有单个导航菜单、页眉、页脚和内容区。
@Xerillio 谢谢。好吧，我想我正在寻找其他方法。我正在用这些数据填充引导模板，但是替换所有对 Article[0].description ... Article[0].Title .... 等的引用的过程非常繁琐
@HereticMonkey 对，我想这取决于你如何获取数据。

标签： c# asp.net-core bootstrap-4 razor-pages .net-5

【解决方案1】：

要使用Bootstrap创建你想要的布局，你需要创建一个容器()。接下来，创建一个row()。然后，添加所需数量的列（带有适当 .col-- 类的标签）。请注意，.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>

结果如下：

更多详细信息，请参考以下链接：

Bootstrap Grid

Bootstrap 4 Columns with Multiple Breakpoints

Bootstrap Responsive Card thumbnail

【讨论】：

我建议更新您的示例和链接资源以使用较新版本的 Bootstrap 而不是 ~6 岁的 Bootstrap 3.x
嗨@Xerillio，感谢您向我推荐。我已经更新了样本。祝你有美好的一天！