Blazor How to reset index number for collaspe table

Question

I use blazor to Create a product Table, they have Main Product Category and Sub Products.

But The index number will can be reset, I wanna to every sub products index number start with 1.

I think I can't use foreach with where to do this table, but I can't get a better way to do it.

Can anyone give me a hand?

enter image description here

This is razor code：

    <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>
                            @foreach (var product in ProductService.Products.Where(x => x.CategoryId == Categories.CategoryId))
                            {
                                <TableRow Class="Product-Data-grid">
                                    <TableRowCell Class="Product-Data"></TableRowCell>
                                    <TableRowCell Class="Product-Data">@product.ProductId</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(); // get all Products
            await ProductService.GetPCategories(); // get all Product Category

        }

}

Wanna sub table index start with 1 not 8.

Answer 1

You could use linq's select with index. Update your inner loop:

@foreach (var item in ProductService.Products.Where(x => x.CategoryId == Categories.CategoryId).Select((product, index) => new { product = product, index = index + 1 }))

Then you can still access the product with an associated index.

@item.index
@item.product.ProductName

An Example using the "Weather data" from the template.

@foreach (var item in forecasts.Select((forecast,index) => new { forecast = forecast , index = index + 1 }))
{
    <tr>
        <td>@item.index</td>
        <td>@item.forecast.Date.ToShortDateString()</td>
        <td>@item.forecast.TemperatureC</td>
        <td>@item.forecast.TemperatureF</td>
        <td>@item.forecast.Summary</td>
    </tr>
}