Question

您好，我有一个问题要听从您的Razor View dynamic table rows的建议，我用foreach制作了我的表，但没有，如果我在同一列中添加一条记录，可以使您创建新列，不要跳到另一列，在这种情况下我该怎么办？所以我对剃刀有看法

<div>
    <table>
        <tr>
            @foreach (var item in product)
            {
                <td>
                    <div class="card" style="width: 18rem; margin-top:3rem; margin-right:3rem; margin-bottom:2rem; margin-left:3rem; position:initial">
                        <img src="https://scontent.fntr8-1.fna.fbcdn.net/v/t1.0-9/107865247_704094323779323_2201784036865521556_n.jpg?_nc_cat=101&_nc_sid=8bfeb9&_nc_ohc=FwSgbE0cEAAAX92rcFt&_nc_ht=scontent.fntr8-1.fna&oh=4ec8b36ac7d0080b2f2bb3096b7b38cc&oe=5F37D400" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h2 class="card-title">@item.ProductName</h2>
                            <p class="card-text">@item.Description</p>
                            <h4 class="card-text">Stock</h4>
                            <p class="card-text">@item.UnitInStock</p>
                            <h4 class="card-text">Color</h4>
                            <p class="card-text">@item.Color</p>
                            <h3 class="card-text" style="align-content:center">$@item.Price</h3>
                            <p class="card-text">@item.CreationDate.ToShortDateString()</p>
                            <AuthorizeView>
                                <Authorized>
                                    <a href="editproduct/@item.Id" class="btn btn-primary">Editar</a>
                                    <button class="btn btn-danger" @onclick="@(() => EliminarProduct(item.Id))">Eliminar</button>
                                </Authorized>
                                <NotAuthorized>

                                </NotAuthorized>
                            </AuthorizeView>
                        </div>
                    </div>
                </td>
                count++;
                if (count % 3 == 0)
                {
                    @:</tr>
                    @:<tr>
                }
            }
        </tr>
    </table>
</div>

Answer 1

我很难理解您的问题；我相信您正在尽力解释您的问题。如果不能回答您的问题，请原谅。

我想我明白了您正在尝试做什么；连续放置3个块，然后再放置3个其他块。

我预见的问题之一是，当您完全有%3个项目（例如，您有6个项目）时，最后一个将在html中添加a，然后循环将结束并再添加一个。因此，除了检查%3之外，您还应该检查自己是否不在最后一项；像这样

if (count % 3 == 0 && count != product.Count())

我可以建议您使用div而不是表格吗？只需为每个块生成一个div并使用css对其进行样式设置。根据您的解决方案，您甚至可以用不同的类名称为div编号（例如：class1，class2，class3），并为每个div指定一个特定的CSS，也可以在每个div中添加float: left并添加clear: both;到您行中的第一个。

然而，最好的方法是使用CSS，在该CSS中，您可以在页面宽度允许的范围内将任意数量的对象放置在一行上。

还有一件事情；如果您想以鲜艳的色彩列出项目，明智的做法是将@key标记添加到每个div或tr。

带剃须刀的动态桌

1 个答案: