c# - MVC 视图，动态添加 html 代码到 div

Question

嗨，我有一个包含两列（div）的视图，我想在这些列中添加一些带有图表的 div。我不知道在运行之前我将拥有多少这些图表以及它们应该转到哪一列。

是否可以根据某些条件交替添加到列中？

<div class="column column-small">
      @foreach (String c in Model.getSettings().chartsList)
      {

          <div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
               <div class="handle"><div class="close"></div></div>
               @Html.Action(c, "Report")
          </div>
      }
</div> 
<div class="column column-big">
</div>

目前此代码有效并将每个图表添加到第一列（#column-small）我如何编辑此代码以将例如每隔一个图表添加到第一列并休息到第二列？

非常感谢

Answer 1

只是一个例子！这样的事情可能会奏效。

var i = 0;
@foreach (String c in Model.getSettings().chartsList)
{
  <div class="column column-small">
  @if(i%2 == 0){
     <div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
     <div class="handle"><div class="close"></div></div>
       @Html.Action(c, "Report")
     </div>
  }
  </div> 
  <div class="column column-big">
  @if(i%2 != 0)
  {
       //Add the other charts here.
  }
  </div>
  i++;
}

您需要注意语法。

Answer 2

你可以这样做（我没有测试过）：

@{
  var list = Model.getSettings().chartsList;
}
<div class="column column-small">
      @for(int i = 0; i < list.Count; i += 2)
      {
          <div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
             <div class="handle"><div class="close"></div></div>
             @Html.Action(list[i], "Report")
          </div>
      }
</div> 
<div class="column column-big">
      @for(int i = 1; i < list.Count; i += 2)
      {
          <div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
             <div class="handle"><div class="close"></div></div>
             @Html.Action(list[i], "Report")
          </div>
      }
</div>

Answer 3

这是一个示例快照，我在其中将示例数据添加到 div。以下是示例 Razor 视图代码

@{
    ViewBag.Title = "Home Page";
    List<string> testList = new List<string>();
    for (int i = 0; i < 10; i++)
    {
        testList.Add("Item" + i + "in div");
    }
    var cnt = 0;
}

<style>
    .column
    {
        width: 400px;
    }
    .column-left
    {
        float: left;
    }
    .column-right
    {
        float: right;
    }
</style>
    @foreach (var t in testList)
    {

        <div class="column column-left">
            @if (cnt % 2 == 0)
            {
                <div>
                    @t
                </div>
            }
        </div>
        <div class="column column-right">
            @if (cnt % 2 != 0)
            {
                <div>
                    @t
                </div>
            }
        </div>
    }