In my Blazor server app, I have a problem when programming the rows of a table dynamically. What could be the problem?

I have following razor page in my Blazor server app (Code-1). In this razor page I have two dynamic tables. In the first table the CNC AX names of a CNC machine are listed (AX0…AX7). If the user clickes to the axis name, the axis parameters belonging to this axis shall be listed in the second table.
As result if I click to any axis name, I get always the parameters of the last axis (AX7) in the second table.

The axis parameters are read from the two dimension CNC_AX_MD array. I am sure that the array has the correct values for each axis, because if I write the first table like Code-2 (below) everything is working fine. But the number of axis are sometimes much more then in my code, so I have to shorten the code.

I think I have a problem on my dynamic table structure in table-1 with the for loop. What could be the problem? I have tried the act. commented out "StateHasChanged()" but it didn’t help.

Code-1

<table>
@{  for (int j = 0; j < 8; j++)
     {
       <tr>
         <td @onclick='@(e => Select_CNC_AX_par(j))'>@CNC_AX_Names[j]</td>
       </tr>
     //StateHasChanged();         
     }
 }
 </table>

<table>
@{  for (int m = 0; m < arraylenght; m++)                            
    {
      <tr>
        <td >CNC_AX_parameter[m]</td>
      </tr>
    }
 }
 </table>



 public void Select_CNC_AX_par(int aksno)
 {
   for(int k=0; k < arraylenght;k++)
    {      
      CNC_AX_parameter[k] = CNC_AX_MD[k, axno];
    }
 }

Code-2

<table>
@{ <tr>
      <td @onclick='@(e => Select_CNC_AX_par(0))'>@CNC_AX_Names[0]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(1))'>@CNC_AX_Names[1]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(2))'>@CNC_AX_Names[2]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(3))'>@CNC_AX_Names[3]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(4))'>@CNC_AX_Names[4]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(5))'>@CNC_AX_Names[5]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(6))'>@CNC_AX_Names[6]</td>
   </tr>
   <tr>
      <td @onclick='@(e => Select_CNC_AX_par(7))'>@CNC_AX_Names[7]</td>
   </tr>
  
 }
 </table>

>Solution :

Try to use the following code:

<table>
    @{
        for (int j = 0; j < 8; j++)
        {
            var Number = j;
            <tr>
                <td @onclick='@(e => Select_CNC_AX_par(Number))'>@j</td>
            </tr>
            //StateHasChanged();
        }
    }
</table>

Do not use a loop variable directly in a lambda expression, such as i in the preceding for loop example. Otherwise, the same variable is used by all lambda expressions, which results in use of the same value in all lambdas.

For more details,you can try to refer to the official doc.

Leave a Reply