Question

我有一个传递给视图的对象的通用列表。目前，每个列表项都逐行显示给用户：

@foreach (var result in Model.SearchResults)
{
    result.Address.TownCity
    // ...
}

因此每个列表项都显示在自己的行中。在美学上，这看起来并不是最好的，因为剩下相当多的空白区域。

我想做的是这样的事情：

第1行|列表项1 |清单项目2

第2行|清单项目3 |列表项目4

依旧.....

这是我必须做的事情服务器端，即将我的列表的一半放入另一个列表，并且在视图中有两个foreach循环 - 每个循环填充一列？或者无论如何这可以在使用剃刀的视图中完成？

Answer 1

您可以将每组行分组为“批次”，然后遍历批次中的每个项目。

@{
    var batches = Model.SearchResult
        .Select((x, i) => new { x, i })
        .GroupBy(p => (p.i / 2), p => p.x);
}
@foreach(var row in batches)
{
    <span>Row @row.Key</span>
    @foreach(var item in row)
    {
        <span>| @item.Address.TownCity</span>
    }
}

或者你可以使用它;它更简单，虽然不那么优雅

@{
    var resultArray = Model.SearchResult.ToArray(); // only necessary if SearchResult is not a list or array
}
@for(var i = 0; i < resultArray.Length; i++)
{
    var item = resultArray[i];
    if (i % 2 == 0)
    {
        <span>Row @(i / 2)</span>
    }
    <span>| @item.Address.TownCity</span>
}

Answer 2

这在CSS中很容易实现，而不会给代码增加额外的负载和复杂性

看到这个小提琴：http://jsfiddle.net/taBec/

@foreach (var result in Model.SearchResults)
{
    <div class="box">@result.Address.TownCity</div>
}

然后在CSS中：

.box { width: 150px; float: left; height:25px}

您的应用程序运行速度更快，您的设计响应迅速且流畅。我希望这会有所帮助。

使用foreach循环时，每行显示两个列表项的通用列表

2 个答案: