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

问：

我正在使用 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
}

我假设我需要将 foreach 循环与 CreateDiv 方法中的计数器相结合，但无法弄清楚这将如何工作。特别是如果行数为奇数 - 卡片组 div 总是需要在最后一行上添加结束标记。

C# foreach HTMLGenricControl

    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
        }
    }

当然，你可以用 statement 代替 .你可以让 global 用它来摆脱和 .forforeachDataTableRow.Countcounterquantity

0赞 Atul Chinchalkar 9/24/2020 #2

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

上一个：如何使用 C 将“li”添加到“ul”标签#

下一个：在段落元素内动态生成 span 元素

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

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

评论