结合 Foreach 循环和计数器，将动态生成的 html 添加到每 n 行的开头和结尾

Question

我正在使用 DataTable 中的数据动态生成 HtmlGeneric 控件。我需要将 HTML 连接到每组 3 的开头和结尾。例如，我的表格看起来像这样：

Title           Body
------------------------------
Order 1     This is body 1
Order 2     This is body 2
Order 3     This is body 3
Order 4     This is body 4
Order 5     This is body 5
Order 6     This is body 6

我目前正在生成这样的 HTML，没有问题：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order 1</h5>
    <p class="card-text">This is body 1</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order 2</h5>
    <p class="card-text">This is body 2</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order 3</h5>
    <p class="card-text">This is body 3</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order 4</h5>
    <p class="card-text">This is body 4</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order 5</h5>
    <p class="card-text">This is body 5</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order 6</h5>
    <p class="card-text">This is body 6</p>
  </div>
</div>

我需要结合一个 foreach 循环和一个计数器，在每 3 张这样的卡片的开头和结尾处将一个 div 与一个卡片组类连接起来。当然，实际上行数比 6 行多得多。：

<div class="card-group">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Order 1</h5>
        <p class="card-text">This is body 1</p>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Order 2</h5>
        <p class="card-text">This is body 2</p>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Order 3</h5>
        <p class="card-text">This is body 3</p>
      </div>
    </div>
</div>
<div class="card-group">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Order 4</h5>
        <p class="card-text">This is body 4</p>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Order 5</h5>
        <p class="card-text">This is body 5</p>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Order 6</h5>
        <p class="card-text">This is body 6</p>
      </div>
    </div>
</div>

它非常简单，无需连接额外的 HTML。这是在我的页面加载方法中执行的：

DataTable dtCards = GetData();
foreach (DataRow row in dtCards.Rows)
{
    var titleText = row["Title"].ToString();
    var bodyText = row["Body"].ToString();
    CreateDiv(titleText, bodyText); //method to create HmtlGeneric Controls
}

            

我假设我需要在 CreateDiv 方法中将一个 foreach 循环与一个计数器结合起来，但我无法完全确定这将如何发挥作用。特别是如果有奇数行 - 卡片组 div 总是需要在最后一行结束标记。

Answer 1

Shane，您实际上是在对表格中的行进行分页，因此请关注 Skip 和 Take Linq 扩展方法。下面是一个仓促的示例

void Main()
{
    // Data table that we are trying to page trough 
    List<string> rows = new List<string>() 
    {
        " title1,body1 ",
        " title2,body2 ",
        " title3,body3 ",
        " title4,body4 ",
        " title5,body5 ",
        " title6,body6 ",
        " title7,body7 "
    };
    
    //Result after paging 
    List<string> group = new List<string>();
    
    // Set your page size or pass in as a parameter
    int numberOfObjectsPerPage = 3;
    
    decimal totalRows = rows.Count; 
    int pages = (int) Math.Ceiling(totalRows/numberOfObjectsPerPage);
    
        
    for(int i=0;i<pages;i++)
    {       
            
            string rowText = "";
            
            // Get the rows in that page Focus on the Skip and Take methods
            var tempRows = rows.Skip(i * numberOfObjectsPerPage).Take(numberOfObjectsPerPage);
            
            // Now foreach page do something here
            foreach(var row in tempRows)
            {
                rowText = rowText + row.ToString();
            }
            
            group.Add("div group" + rowText + "/div" );
            
    };

    group.ForEach( g => 
    {
         Console.WriteLine(g);
    });
}

你会得到这样的东西。

div group title1,body1  title2,body2  title3,body3 /div
div group title4,body4  title5,body5  title6,body6 /div
div group title7,body7 /div

Answer 2

我认为这是使用两种方法的好方法，一种用于创建start tag，另一种用于创建end tag（如果需要），如下所示：

    int counter=0, quantity;//make these global in your class

    public void CreateHtml()
    {
        DataTable dtCards = GetData();
        quantity= dt.Rows.Count;
        foreach (DataRow row in dtCards.Rows)
        {   counter++;
            EndCardGroup();
            StartCardGroup();
            var titleText = row["Title"].ToString();
            var bodyText = row["Body"].ToString();
            CreateDiv(titleText, bodyText); //method to create HmtlGeneric Controls
        }
    }

    private void StartCardGroup()
    {
        if (counter % 3 == 0 || counter == 1)
        {
            //you code to create start 'CardGroup' div
        }
    }

    private void EndCardGroup()
    {
        if (counter %3 == 0 || counter==quantity)
        {
            //you code to create end 'CardGroup' div
        }
    }

当然，您可以使用for 语句代替foreach。你可以让DataTable全局使用它的Row.Count来摆脱counter和quantity。