带剃须刀的动态表

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 设置它们的样式。根据您的解决方案，您甚至可以使用不同的类名（例如：class1、class2、class3）给您的 div 编号，并为它们每个指定一个特定的 css，或者您可以将 float: left 添加到每个 div 并将 clear: both; 添加到第一个在你的行中。

然而，最好的方法是使用 css，您可以在一行中放置任意数量的对象，只要页面宽度允许。

还有一件事；如果您想在 blazor 中列出项目，明智的做法是将 @key 标签添加到每个 div 或 tr。