MVC视图，向div动态添加html代码

Question

Hi I have a View with two columns (divs) and I would like to add to those columns some divs with charts. I don't know how many of those charts I will have and to which column they should go until it is running.

Is it possible to add alternately to columns depending on some conditions?

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

At the moment this code works and is adding every chart to first column (#column-small) How can I edit this code to add for example every second chart to first column and rest to second column?

Many thanks

Answer 1

Just an example! Something like this might work.

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

You need to take care of the syntax.

Answer 2

You can do it like this (I haven't tested it):

@{
  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

Here is an example snapshot, where I added sample data to divs. and following is the sample Razor view code

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