4

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

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

所以每个列表项都显示在自己的行中。从美学上讲，这看起来并不是最好的，因为留下了很多空白空间。

我想做的是这样的：

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

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

等等.....

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

4

2 回答 2

8

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

@{
    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>
}
于 2013-04-11T17:29:09.630 回答
4

这在 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}

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

于 2013-04-11T17:47:00.453 回答