Test for first item in a collection in Blazor page

Question

I am trying to test for the first item in a collection of items. In the code below I want the div with text "first" to render once. In my current code it never renders. What am I doing wrong?

 <table class="mud-pivot-root">
            @if (Matrix?.Rows?.Any() ?? false)
            {
                int rowCounter = 0;

                @foreach (MatrixRow row in Matrix.Rows)
                {
                    int colCounter = 0;

                    <MudTr>
                        @foreach (MatrixCell c in row.Cells)
                        {
                            int rc = rowCounter;

                            if (rc == 0)
                            {
                                <div>first</div>
                            }

Reference: Blazor/razor onclick event with index parameter

Caveman74 · Accepted Answer · 2021-08-04T07:02:45.967

I think your problem is that rc is a local variable and is never set to != 0. So the condition in the @if block is always true.

 <table class="mud-pivot-root">
            @if (Matrix?.Rows?.Any() ?? false)
            {
                int rowCounter = 0;

                @foreach (MatrixRow row in Matrix.Rows)
                {
                    int colCounter = 0;

                    <MudTr>
                        @foreach (MatrixCell c in row.Cells)
                        {
                            int rc = rowCounter;

                            if (rc == 0)
                            {
                                <div>first</div>
                               // you need to set rc   
                               // to a value =! 0
                               rc = 1
                            }

Another approach is to use an overload for Select() in System.Linq that allows to project each element of a sequence into a new form by incorporating the element's index.

    public static IEnumerable<TResult> Select<TSource,TResult>  
        (this IEnumerable<TSource> source, Func<TSource,int,TResult> selector);

You could use this method to produce your desired result.

    <h3>Matrix</h3>

    <table>
        @if (MyMatrix.Rows.Any())
        {
            @foreach (IndexedMatrixRow indexedRow in 
                        MyMatrix.Rows.Select<MatrixRow, IndexedMatrixRow>((row, index) => new(row, index)))
            {
                <tr>
                    @foreach (IndexedMatrixCell indexedCell in 
                                indexedRow.Row.Cells.Select<MatrixCell, IndexedMatrixCell>((cell, index) => new(cell, index)))
                    {
                        <td>
                            @if (indexedCell.Index == 0)
                            {
                                <p>first</p>
                            }
                            @indexedCell.Cell.CellValue
                        </td>
                    }
                </tr>
            }
        }
    </table>

    @code {
        protected override void OnInitialized()
        {
            var row1 = new MatrixRow();
            row1.Cells.Add(new MatrixCell() { CellValue = "A1" });
            row1.Cells.Add(new MatrixCell() { CellValue = "B1" });
            row1.Cells.Add(new MatrixCell() { CellValue = "C1" });

            var row2 = new MatrixRow();
            row2.Cells.Add(new MatrixCell() { CellValue = "A2" });
            row2.Cells.Add(new MatrixCell() { CellValue = "B2" });
            row2.Cells.Add(new MatrixCell() { CellValue = "C2" });

            MyMatrix.Rows.Add(row1);
            MyMatrix.Rows.Add(row2);

            base.OnInitialized();
        }

        Matrix MyMatrix = new Matrix();

        record IndexedMatrixRow(MatrixRow Row, int Index);
        record IndexedMatrixCell(MatrixCell Cell, int Index);

        class Matrix
        {
            IList<MatrixRow> _rows = new List<MatrixRow>();
            public IList<MatrixRow> Rows => _rows;
        }

        class MatrixRow
        {
            IList<MatrixCell> _cells = new List<MatrixCell>();
            public IList<MatrixCell> Cells => _cells;
        }

        class MatrixCell
        {
            public string CellValue { get; set; }
        }
    }

Test for first item in a collection in Blazor page

1 Answers1