网格系统在 Asp.net MVC Razor 中用行然后列显示数据

Question

with row then column in Razor

下面是我的代码，它生成的数据类似于左图

我想知道在 Razor 和 Bootstrap Grid 中是否可以生成像右侧这样的数据

 <div class="container">
 <div class="content">
   <div class="row text-center">
      @foreach (var i in Model){
         <div class="col-md-4">
            <div id="cookie" style="height: 100px">i.Name</div>
         </div>
      }
     </div>
 </div>
 </div>

我试着写一份声明来确定并思考如何生成正确的声明，
这是我的代码：

 <div class="container">
 <div class="content">
    <div class="row text-center">
      @{
        for(var countQuantity = 0; countQuantity <Model.Count() ; countQuantity ++){
         if(countQuantity % 3 == 0)
         {  @: <div class="col-md-4">  }
          <div class="col-md-12">
            <div id="cookie" style="height: 100px">Name...</div>
         </div>
          if(countQuantity % 3 == 0)
         {  @: </div>  }
        }
     </div>
 </div>
</div>

但我不知道如何使用 foreach 在上面的代码中显示模型的数据...

Answer 1

在您的第二个代码片段中，为了显示模型名称，进行以下更改：

初始化一个索引变量
使用传统的数组索引访问方法显示名称值。

<div class="container"> <div class="content"> <div class="row text-center"> @{ int index = 0; for (var countQuantity = 0; index < Model.Count(); index++) { if (countQuantity % 3 == 0) { @: <div class="col-md-4"> } <div class="col-md-12"> <div id="cookie" style="height:100px"> @Model[index].Name </div> </div> if (countQuantity % 3 == 0) { @:</div> } } } </div> </div> </div>

网格系统在 Asp.net MVC Razor 中用行然后列显示数据

Grid System Showing Data with row then column in Asp.net MVC Razor

c#

asp.net-mvc

grid-system

razor

bootstrap-4