使用 Razor 中的 foreach 循环将输出限制为每个 div 标签中的两个项目答案

【问题标题】：Limit the output to only two items in each div tag using foreach loop in Razor使用 Razor 中的 foreach 循环将输出限制为每个 div 标签中的两个项目
【发布时间】：2014-03-17 17:39:34
【问题描述】：

我只想在 div 标签中显示两个项目。所以第一个 div 标签会显示两个项目或产品，然后我会添加另一个 div 标签来显示接下来的两个。我无法更改 db.Query，因为我需要来自该特定部门的数据。有没有办法做到这一点？我应该使用除 foreach 循环以外的东西吗？任何帮助，将不胜感激。如果我想要的东西令人困惑，请告诉我。谢谢！

@{
    var db = Database.Open("Kudler Internet");
    var products = db.Query("SELECT * FROM Inventory  WHERE Department='Bakery'");

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Shopping Online - Kudler Fine Foods</title>

<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" title="html5doctor.com Reset Stylesheet" />
<link rel="stylesheet" type="text/css" href="css/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/kudler.css">
<script type="text/javascript" src="js/modernizr-2.0.6.min.js" >

</script>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>

<body id="internet">

<header class="wrapper">
  <div class="container_16 logo">
    <p>Kudler Fine Foods</p>
  </div>

  <div class="clear"></div>

</header>

<nav class="container_16 navigation">


        <ul>
                 <li><a href="index.html">Home</a>
                </li>
                <li>
                    <a href="catalog.html">ONLINE SHOPPING</a>
                    <ul>
                        <li>
                            <a>Bakery</a>
                        </li>
                        <li>
                            <a>Meat &amp; Seafood</a>
                        </li>
                        <li>
                            <a>Produce</a>
                        </li>
                        <li>
                            <a>Cheese &amp; Dairy</a>
                        </li>
                        <li>
                            <a>Wine</a>
                        </li>
                    </ul>
</li>

                <li>
                    <a>CART</a>
                </li>
                <li>
                    <a>ABOUT</a>
                </li>
                <li>
                    <a>NEWS</a>
                </li>
                <li>
                    <a>LOCATIONS</a>
                </li>
  </ul>
        <hr />
</nav>

<section class="container_16">
<div id="slideshow"> 
        <img src="images/ph_940_300.gif" alt="Placeholder image"  title="Placeholder Image" /> 
  </div>

  <nav class="navigation secondarynav">

      <hr />
    </nav>

<div id="article" class="container_16">



<div class="grid_6">
    @foreach (var img in products){
            <img src="images/ph_244_188.gif" alt="placeholder image" width="185" height="160" style="float:left; margin-right:30px; padding-bottom:10px;" title ="Placeholder Image" />
                                                                                                                                                                              }
</div>

        <div class="grid_6 content border_left">
            @foreach (var p in products ) 
            {

            <h1> @p.InventoryItem</h1>
            <p> @p.Price</p>
          <p>@p.Units  </p>
                     <br/>}
        </div>

</div>

【问题讨论】：

使用一个简单的 for 循环，每个循环增加 2。请务必在尝试打印之前检查每个元素是否存在。

标签： c# html razor foreach-loop-container

【解决方案1】：

您可以为此使用for 循环的递增值。像这样的：

<div class="grid_6 content border_left">
@for (var i = 0; i < products.Count(); i++)
{
    <h1>@products[i].InventoryItem</h1>
    <p>@products[i].Price</p>
    <p>@products[i].Units</p>
    <br/>
    @if (i % 2 == 1)
    {
        </div>
        <div class="grid_6 content border_left">
    }
}
</div>

这应该正常输出h1 和p 元素，并且循环的每第二次迭代还会输出div 元素的关闭和重新打开。

【讨论】：

【解决方案2】：

我会使用 Linq 分组将项目组合成 2 个组。像这样：

@foreach (var grp in products
    .Select((index, item) => { index = index, item = item }))
    .GroupBy(item => item.index / 2))
{
    <div class="grid_6 content border_left">
        @foreach (var p in grp)
        {
            <h1> @p.item.InventoryItem</h1>
            <p> @p.item.Price</p>
            <p> @p.item.Units </p>
            <br/>
        }
    </div>
}

【讨论】：