如何使用Razor通过循环正确生成引导网格? [英] How properly generate bootstrap grid via loop using Razor?

问题描述

我使用ASP.NET MVC和引导程序.我有很多对象(> 2)，每个对象都需要一个<div class="col-xs-6">，但连续只有2个列.如何实现使用循环? 有一种方法，但我正在寻找更好的方法:

I use ASP.NET MVC and bootstrap. I have many objects (>2) in collection and for each need a <div class="col-xs-6"> but with only 2 cols in a row. How to achive this using loop? There is 1 way but I am looking for something better:

@model List<Object>
@using (Html.BeginForm("ActionName", "ControllerName"))
{
    <div class="row">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i % 2 != 0) {
        <div class="row">
            <div class="col-xs-6">
                @Html.TextBoxFor(o => o[i].Value)
            </div>
        </div>
        } else {
            <div class="col-xs-6">
            @Html.TextBoxFor(o => o[i].Value)
            </div>
        }
    }
    </div>
}

推荐答案

关闭行div，并在第2次迭代中在循环内开始一个新的行

Close the row div and start a new one inside the loop on every 2nd iteration

<div class="row">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i > 0 && i % 2 == 0)
        {
            @:</div><div class="row"> // close and start new row
        }
        <div class="col-xs-6">
            @Html.TextBoxFor(o => o[i].Value)
        </div>
    }
</div>

这篇关于如何使用Razor通过循环正确生成引导网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！