(MVC 3 Razor) - 循环遍历 3 列 div 的更简单方法

2024-02-12

目前我在 CSHTML 中使用以下代码:

@{int i = 0;}
@foreach (var item in Model.Traders)
{
    if ((i++ % 3) == 0) {
        if (i != 1) {
            @:</div>
        }
        @:<div class="row">
    }

    @:<div class="four column"><div class="panel new"><h3 class="dotted"><strong>@item.Title</strong></h3><p>@item.Description</p><code>&lt;div class=&quot;panel pick&quot;&gt;</code></div></div>
}

@if (i != 0) {
    @:</div>
}

这将输出以下 HTML:

<div class="row">
    <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div>
    <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div>
    <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div>
</div>
<div class="row">
    <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Bobby</strong></h3><p>Bobby bobby bobby</p><code>&lt;div class=&quot;panel pick&quot;&gt;</code></div></div>
    <!-- Add missing divs if there's less than 3 (there always needs to be 3 divs inside a div row). In this case it's 2 that are missing -->
    <div class="four column"></div> <!-- my code does not render these -->
    <div class="four column"></div> <!-- my code does not render these -->
</div>

我的问题是是否有一种更简单的方法来实现我在视图中所做的事情,并确保在连续少于 3 个 div 时添加缺失的 div。


批量交易 3 件商品,试试这个:

@{

    var g = Model.Traders.GroupBy(r => Model.Traders.IndexOf(r) / 3).ToList();
}

@foreach (var parentItem in g)
{ 
    <div class="row">
        @foreach (var item in parentItem)
        { 
           <div class="four column"><div class="panel new"><h3 class="dotted"><strong>@item.Title</strong></h3><p>@item.Description</p><code>&lt;div class=&quot;panel pick&quot;&gt;</code></div></div>


        }


    @for (int i = parentItem.Count(); i < 3; i++)
    { 
        <div class="four column"></div>
    }
    </div>
}

Regards.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

(MVC 3 Razor) - 循环遍历 3 列 div 的更简单方法 的相关文章

随机推荐

  • 如何将 SVG 对象插入到带有链接的 HTML 中?

    我不想添加到 svg 的链接 这是不可能的 因为 svg 不是我提供的 但想添加一个链接 例如 a href img src foo svg a 只是这一次不是img but a object 这样我就可以包含一个 svg 它适用于某些浏览
  • 如何让Jqgrid冻结列自动换行

    我正在使用最新的 jqgrid 包 4 4 5 我想让标题栏自动换行 我读了奥列格answer https stackoverflow com questions 8686616 how can i get jqgrid frozen co
  • Python BeautifulSoup:通配符属性/id搜索

    我有这个 dates soup findAll div id date 但是 我需要 id 作为通配符搜索 因为id can be date 1 date 2 etc 您可以提供可调用作为过滤器 dates soup findAll div
  • 如何访问 rowdatabound 上的 gridview 列?

    我想在值为 1 时将 gridview 列的值更改为活动状态 我有类似的 gridview 列
  • 为什么在类中实现的 C# 接口方法必须是公共的?

    我有一个继承接口的类 接口成员方法在我的类中实现 没有访问修饰符 因此 默认情况下它是 private 我收到错误 无法实现接口成员 因为它不是公共的 为什么不允许 我不能覆盖可访问性吗 这是一个例子why能够覆盖可见性是没有意义的 int
  • 在调整大小时保存 NSWindow 大小并为用户关闭

    我注意到 OS X 上的所有应用程序似乎都会保存您设置的大小 下次打开它时 它通常处于相同的位置和大小 我正在制作一个应用程序 我注意到调整大小后 如果我再次启动应用程序 它的大小只是我在 Xcode 4 的 IB 中设置的大小 而不是我在
  • 检查是否连接了打印机

    Windows 中有没有一种方法 在 Windows CE 中工作 来检查打印机是否已连接并与 C 中的 LPT1 进行通信 Edit 更多信息 我们目前正在使用通用 Windows CE 打印机驱动程序 pcl dll 通过将其传递到Cr
  • 将 Perfmon 分析解释为特定于应用程序的观察/数据的最佳方法是什么?

    我们很多人都使用过Perfmon工具来进行性能分析 特别是对于 Net 计数器 但 Perfmon 中存在太多变量 因此总是很难将 Perfmon 结果解释为有关我的应用程序的有价值的反馈 我想使用 perfmon 不是像蚂蚁分析器 htt
  • 如果我们是有效用户,我们可以克隆存储库吗?

    我是 Git 新手 所以如果这是一个愚蠢的问题 请原谅 在我们的组织中 我们使用 Git 作为存储库 我可以这样做git checkin checkout pull 从我的办公室机器 我们的 Git 存储库 URL 是这样的 但由于限制我无
  • 如何使 Flex Row 响应式 Bootstrap 4

    目前页面如下所示 现在 调整大小到移动屏幕时 弹性框会溢出容器 Html div class d flex flex row text white text center div class port item p 4 bg primary
  • 如何修改 C 程序以便 gprof 可以分析它?

    当我在我的 C 程序上运行 gprof 时 它说我的程序没有累积时间 并且所有函数调用都显示 0 时间 但是它确实对函数调用进行计数 如何修改我的程序 以便 gprof 能够计算某项运行所需的时间 编译的时候有没有指定 pg http so
  • 通过解析纯文本文件生成数据结构

    我为我正在编写的游戏编写了一个文件解析器 以便自己轻松更改游戏的各个方面 例如角色 舞台 碰撞数据 例如 我可能有一个像这样的字符类 class Character public int x y Character s location C
  • 使用 Golang 限制可执行文件的单个实例

    我一次只需要允许 Golang 可执行文件的一个实例 我不确定如何使用全局互斥体来确保没有其他实例正在运行 这将在 Windows 机器上运行 我知道这个主题有点老了 但我最近在 Windows 上需要它 我将在这里发布我是如何做到的 以防
  • 建立一个字典来按值查找键[重复]

    这个问题在这里已经有答案了 字典通常适合按键查找值 但按值查找键相当慢 for k v in dictionary items if v myValue return k 是否已经有一个数据结构可以同时实现 key gt value 和 k
  • d3 图缺少数组中的第一项

    我真的很挣扎 我正在使用 d3 库在 javascript 中创建点图 我想过滤实际绘制的点 以便稍后我可以将文本字段添加到数据集中名为 突出显示 的列中指定的其中一些字段 就像测试一样 我只绘制标记为 是 的圆圈 但最终会绘制所有圆圈 我
  • 为什么不能获取 nullptr 的地址?

    在C 11标准中 我不明白为什么要取地址nullptr是不允许的 而一个is允许使用自己的地址std nullptr t实例 除了这个事实之外nullptr是一个保留关键字 这个决定有什么指定的理由吗 只是因为它让我感到有趣 我尝试使用以下
  • 使用 PRAW 在 Python 中从 Reddit API 解码 JSON

    我在 Python GTK 应用程序中使用 PRAW for Reddit API 我已经成功地使用了 API 但我似乎无法解码 JSON 以供使用 应该知道 我是Python和GTK应用程序的初学者 Mode Python coding
  • 网格中最大的产品

    我被这个问题困扰了 我确实认为我已经找到了正确的解决方案 但是当将其提交到网站时 它不接受 我尝试通过打印所有可能的组合来调试它 它们都完成了 水平 垂直和对角线 数组也被正确填充 我后来打印出来检查了一下 你知道问题可能出在哪里吗 Que
  • 安装aws-sdk后出错

    我正在尝试让回形针与 S3 一起使用 但我的视图抛出错误 cannot load such file aws sdk You may need to install the aws sdk gem 我的 Rails 配置如下 Gemfile
  • (MVC 3 Razor) - 循环遍历 3 列 div 的更简单方法

    目前我在 CSHTML 中使用以下代码 int i 0 foreach var item in Model Traders if i 3 0 if i 1 div class row div class four column div cl