[英]code based repeater in Razor c#
我有以下剃刀代码:
@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)为每个批次创建一个网格列。
诺布。
谢谢你们的评论。
我最后就是这样解决的。 我在模型上使用 Skip and 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>
}
正如您已经发现的那样, razor
没有现成的解决方案....Bootstrap 是解决此问题的最佳解决方案,正如@B.Yaylaci 已经建议的那样....请参考以下问题:
希望它有帮助,干杯。:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.