MVC View，将动态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>
    }