Razor c#中基于代码的中继器答案

【问题标题】：code based repeater in Razor c#Razor c#中基于代码的中继器
【发布时间】：2016-05-10 11:23:55
【问题描述】：

我有以下 Razor 代码：

@foreach (var row in Model)
        {
           <div><img src="~/Content/images/flickabase/@row.FlickaMasterImage" alt="@row.FlickaMasterImageCaption" class="img-thumbnail" width="100" heigh="100"/>
            <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a> </div> 
        }

这会打印出一系列缩略图和船名。像这样。

问题是我想写出四列，数据从上到下，从左到右。过去使用 .net 中继器控制很容易，但我看不出如何使用 Razor 轻松做到这一点。是否有捷径可寻？我想出的最好的主意是计算行数。除以四，然后（因为我使用的是 Bootstrap）为每个批次创建一个网格列。

诺布。

【问题讨论】：

尝试用 CSS 处理它，否则必须编写一些笨拙的逻辑
您可以使用 css 解决问题，获取引导程序并导入您的解决方案，并将其视为指南； getbootstrap.com/components/#thumbnailse 。还有这个；（有jsfiddle demo和源码）stackoverflow.com/questions/26694998/…

标签： c# asp.net-mvc razor layout repeater

【解决方案1】：

感谢你们所有的cmets。

这就是我最终解决它的方法。我在模型上使用了 Skip 和 Take 来获取批量数据。永远不会有大量数据，当它增长时，我会在未来重新审视。我最终放弃了图像。这四个批次在一个 Bootstrap col 中一个一个地写出来，它负责布局。

我确信有一种更优雅的方式，但现在就可以了。

@{
    Layout = "Shared/_Layout.cshtml";
    ViewBag.Title = "Flicka Names";
    var i = Model.Count(); // count rows
    var size = i/4; // get the batch size

    var first = Model.Take(size);
    var second = Model.Skip(size).Take(size); 
    var third = Model.Skip(size * 2).Take(size);
    var fourth = Model.Skip(size * 3).Take(size);
}

<h1>Flicka Names</h1>
<p>There are @i Flickas in our system.</p>

<div class="col-sm-3">

    @foreach (var row in first)
        {
           <div>
            <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a> </div>

        }
    </div>

<div class="col-sm-3">
    @foreach (var row in second)
        {
        <div>
            <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a></div>

        }
</div>


<div class="col-sm-3">
    @foreach (var row in third)
        {
        <div>
            <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a>
        </div>

    }

</div>

<div class="col-sm-3">
    @foreach (var row in fourth)
            {
        <div>
            <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a>
        </div>

    }

【讨论】：

【解决方案2】：

正如您已经发现的那样，razor 中没有现成的解决方案....Bootstrap 是解决此问题的最佳解决方案，正如@B.Yaylaci 已经建议的那样......请参考以下问题：

mvc 3 equivalent to <asp:repeater> function?

希望对你有帮助，干杯。:)

【讨论】：