Question

<table id="tblCustomItemSpecifics" cellspacing="0" cellpadding="0" class="tabs-details_table" border="0" style="border-collapse:collapse;">
                                @if (@Model.ItemSpecification != null)
                                {                                       
                                    foreach (var item in Model.ItemSpecification)
                                    {                                            

                                        <tr><td>@item.Name</td><td>@item.Value</td></tr>
                                    }
                                }
                            </table>

以上代码代表以下四项：

Item1 : test Item 

Item2 : test Item

item3 : test item

item4 : test item

我想在这里写两列：如：

Item1 : test Item              Item2 : test Item

item3 : test item              item4 : test item

我正面临有条件地声明标签的问题。希望你能理解这个问题。

Answer 1

如果您始终希望表是固定数量的列，则可以使用模运算符有条件地每隔一行输出新行。像这样：

@for (var i = 0; i < Model.ItemSpecification.Count(); i++)
{
    if (i % 2 == 0)
    {
        <tr>
    }
    <td>@Model.ItemSpecification[i].Name</td><td>@Model.ItemSpecification[i].Value</td>
    if (i % 2 == 1)
    {
        </tr>
    }
}
if (Model.ItemSpecification.Count() % 2 != 0)
{
    <td></td></tr>
}

这应该在循环的每次交替迭代中发出<tr>和</tr>标记，而不是每次迭代。（i % 2只有在0可被i整除的情况下2时才会等于i。）此也应该在最后添加一个空项对于奇数列表。

请注意，这是非常自由的代码，您可能需要做一些调整。但重点仍然是一致的。无论您拥有多少列，都要检查您的计数器（{{1}}），以了解是否需要添加新列。然后在循环结束时有一些逻辑来清理表以解决不均匀的行数。

Answer 2

您需要通过计数器和html.raw生成行。

@{ var columns = 2; }
<table id="tblCustomItemSpecifics" cellspacing="0" cellpadding="0" class="tabs-details_table" border="0" style="border-collapse:collapse;">
      @if (@Model.ItemSpecification != null)
      {
          var column = -1;                                        
          <tr>
          foreach (var item in Model.ItemSpecification)
          {
              if ( ++column % columns == 0 ) {
                  @Html.Raw("</tr><tr>")
              }
              <td>@item.Name</td><td>@item.Value</td>
          }
          </tr>
      }
</table>

如果要向下而不是向下流动列，请先调用此扩展方法：

public static List<T> Sort<T, U>(this List<T> Source, Func<T, U> OrderFunc) { return Source.OrderBy(OrderFunc).ToList(); }

/// <summary>
/// Sorts lists down the specified number of columns
/// for instance:
/// 1  4  7
/// 2  5  8
/// 3  6  9
/// 
/// instead of:
/// 1  2  3
/// 4  5  6
/// 7  8  9
public static List<T> ColumnSort<T, U>(this List<T> Source, Func<T, U> OrderFunc, int NumColumns) where T : new() {
    var sorted = Source.Sort(OrderFunc);
    var m = (int)Math.Ceiling(sorted.Count / (double)NumColumns);
    var n = NumColumns;
    var flipped = new T[m*n];
    for (var i = 0; i < sorted.Count; i++ )
    {
        var t = i % m * n + i / m;
        flipped[t] = sorted[i];
    }
    return flipped.ToList();
}

使用示例：

          foreach (var item in Model.ItemSpecification.ToList().ColumnSort(itemSpec => itemSpec.Name,columns)
          {
              if ( ++column % columns == 0 ) {
                  @Html.Raw("</tr><tr>")
              }
              <td>@item.Name</td><td>@item.Value</td>
          }

这是Hopefully this is how you are looking to align the labels

Answer 3

这里你需要的只是将你的物品'批量'分成2批次。你可以在控制器中查看或（更好）。最简单的方法是使用morelinq进行批处理：

int columnsCount = 2;
var rows = Model.ItemSpecification.Batch(columnsCount);

或者你可以手动完成：

@{ 
  var columnsCount = 2;
  var rows = from x in Model.ItemSpecification.Select((item, index) => new { item, index })
             group x by x.index / columnsCount into g
             select g.OrderBy(x => x.index).Select(x => x.item);
}

之后显示行非常简单：

<table>
    <tbody>
        @foreach (var row in rows)
        {
            <tr>
                @foreach (var item in row)
                {
                    <td>@item.Name</td><td>@item.Value</td>
                }
            </tr>
        }
    </tbody>
</table>

注意：因此您只需要更改页面上显示的项目的位置，那么表格可能不是最佳方式。例如。你可以使用Bootstrap grid system 之类的东西（或编写你自己的css，将第二列项目推向右边）。

在cshtml页面中处理html标签和c＃脚本

3 个答案: