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

Question

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

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 和一个卡片组 class。当然，实际行数比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

我认为使用两种方法是个好方法，一种用于创建 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.

Answer 2

Shane，您实际上是在 table 中对行进行分页，因此请关注 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

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

Combine Foreach loop and counter to add dynamically generated html to the beginning and end of every nth row

c#

foreach

htmlgenericcontrol