Blazor折叠表格：如何实现子商品项次从1开始重置

要实现每个分类下子商品项次从1开始计数，需在每个分类的子商品循环内单独维护一个局部计数变量，替代原有的ProductId或全局索引。

修改步骤 #

1. 在展开子商品的@if (Categories.ShowProduct)代码块中，子商品foreach循环前声明并初始化局部计数变量。
2. 在子商品项次单元格中使用该变量自增来生成序号。

修改后的关键代码片段 #

@if (Categories.ShowProduct)
{
    <TableRow Class="Products-header">
        <TableHeaderCell></TableHeaderCell>
        <TableHeaderCell>項次</TableHeaderCell>
        <!-- 其余表头省略 -->
    </TableRow>
    @{
        // 每个分类下初始化子商品计数为0
        int prodIndex = 0;
    }
    @foreach (var product in ProductService.Products.Where(x => x.CategoryId == Categories.CategoryId))
    {
        prodIndex++; // 每次循环自增计数
        <TableRow Class="Product-Data-grid">
            <TableRowCell Class="Product-Data"></TableRowCell>
            <TableRowCell Class="Product-Data">@prodIndex</TableRowCell>
            <!-- 其余商品信息单元格省略 -->
        </TableRow>
    }
}

完整修改后的Razor代码 #

<section>
    <div id="table" style="margin-bottom: 50px;">
        <div class="Pcategory-Table">
            <div class="row-header">
                <div class="Pcategory-Table-head">功能</div>
                <div class="Pcategory-Table-head">項次</div>
                <div class="Pcategory-Table-head">商品類別</div>
                <div class="Pcategory-Table-head">商品規格</div>
                <div class="Pcategory-Table-head">是否同步</div>
                <div class="Pcategory-Table-head">同步方式</div>
                <div class="Pcategory-Table-head">建立時間</div>
                <div class="Pcategory-Table-head">同步時間</div>
                <div class="Pcategory-Table-head">編輯</div>
            </div>

            @foreach (var Categories in ProductService.Categories)
            {
                <div class="row-data">
                    <div class="Pcategory-Table-Data"><button class="btn btn-info" @onclick="() => Categories.ShowProduct = !Categories.ShowProduct" type="button">展開</button></div>
                    <div class="Pcategory-Table-Data">@(CateIndex=CateIndex+1)</div>
                    <div class="Pcategory-Table-Data">@Categories.CategoryName</div>
                    <div class="Pcategory-Table-Data">@Categories.CategoryDesc</div>
                    <div class="Pcategory-Table-Data">@Categories.SycnFlag</div>
                    <div class="Pcategory-Table-Data">@Categories.SycnType</div>
                    <div class="Pcategory-Table-Data">@Categories.EntryDate</div>
                    <div class="Pcategory-Table-Data">@Categories.ModifyDate</div>
                    <div class="Pcategory-Table-Data"><button class="btn btn-success" type="button">編輯</button></div>
                </div>

                @if (Categories.ShowProduct)
                {
                    <TableRow Class="Products-header">
                        <TableHeaderCell></TableHeaderCell>
                        <TableHeaderCell>項次</TableHeaderCell>
                        <TableHeaderCell>實體商品名稱</TableHeaderCell>
                        <TableHeaderCell>實體商品規格</TableHeaderCell>
                        <TableHeaderCell>平台</TableHeaderCell>
                        <TableHeaderCell>賣場</TableHeaderCell>  
                        <TableHeaderCell>賣場狀態</TableHeaderCell>
                        <TableHeaderCell>數量</TableHeaderCell>
                        <TableHeaderCell>單位</TableHeaderCell>
                        <TableHeaderCell>建立時間</TableHeaderCell>
                        <TableHeaderCell>同步時間</TableHeaderCell>
                    </TableRow>
                    @{
                        int prodIndex = 0;
                    }
                    @foreach (var product in ProductService.Products.Where(x => x.CategoryId == Categories.CategoryId))
                    {
                        prodIndex++;
                        <TableRow Class="Product-Data-grid">
                            <TableRowCell Class="Product-Data"></TableRowCell>
                            <TableRowCell Class="Product-Data">@prodIndex</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.ProductName</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.ProductDesc</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.Platform</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.Store</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.StoreStatus</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.Qty</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.Unit</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.EntryDate</TableRowCell>
                            <TableRowCell Class="Product-Data">@product.ModifyDate</TableRowCell>
                        </TableRow>
                    }
                }
            }
        </div>
    </div>
</section>

@code{
    private int CateIndex { get; set; } = 0;

    protected override async Task OnInitializedAsync()
    {
        await ProductService.GetProducts(); 
        await ProductService.GetPCategories(); 
    }
}

原理说明：每个分类展开时，局部变量prodIndex会被重新初始化为0，遍历该分类下的商品时逐步自增，确保每个分类的子商品项次独立从1开始计数，不会与其他分类的序号产生干扰。

内容的提问来源于stack exchange，提问作者Edemilorhea