Blazor-动态生成的表中的按钮

时间:2019-11-01 10:09:45

标签: c# blazor .net-core-3.0 blazor-server-side

我的桌子有一个小问题,按钮和onclick可以正常工作,但是我想通过click传递的参数却无法达到我期望的效果。

这是代码。

<table class="table-spaced table-responsive">
    <thead>
        <tr>
            <th />
            @for (int i = 1; i <= Plate.PlateType.NumberOfColumns; i++)
            {
                <th class="cell_head">@i</th>
            }
        </tr>
    </thead>
    <tbody>
        @for (int y = 0; y < Plate.PlateType.NumberOfRows; y++)
        {
            <tr>
                <td style="vertical-align:central">
                    @Helper.RowLetters[y]
                </td>
                @for (int x = 1; x <= Plate.PlateType.NumberOfColumns; x++, Position = string.Format("{0:c}{1:d2}", Helper.RowLetters[y], x))
                {
                    if (Plate.Compounds.ContainsKey(string.Format("{0:c}{1:d2}", Helper.RowLetters[y], x)))
                    {
        ---->           <td class="compound"><button type="button" class="compound" @onclick="() => PlateGridClick(Position)" itemprop="@string.Format("{0:c}{1:d2}", Helper.RowLetters[y], x))"/></td>
                    }
                    else
                    {
                        <td class="no_compound" />
                    }
                }
            </tr>
        }
    </tbody>
</table>

表格的大小例如为P24,无论我按下哪个按钮,Position始终为P25,创建该特定单元格时我希望获得Position的值,但是当我单击该按钮时,Position似乎已设置整个表格已经创建,并且坐标已经到达终点。

是否有办法在blazor中实现与click事件相同的功能,但是将参数存储在按钮中,而不是在单击时获取Position参数的当前值?

1 个答案:

答案 0 :(得分:2)

我相信这是使用for循环的结果。

尝试一下:在for循环中定义一个局部变量,并将该局部变量的值分配给必要的代码。

示例代码阐明了我的意思:

此循环创建10个buttton元素,并将值10传递给ShowPosition方法。无论您单击什么按钮,都会将值10传递给ShowPosition方法。 for循环结束时,i的值为10。这是不这样做的方法

 @for (int i = 0; i < 10; i++)
    {
        <button type="button" @onclick="() => ShowPosition(i)">Click</button> 
    }

为了正确执行操作,您应该创建一个类似于以下内容的本地变量

 @for (int i = 0; i < 10; i++)
 {
     var local_i = i;

     <button type="button" @onclick="() => ShowPosition(local_i)">Click</button>
        }

现在,每当单击按钮控件时,您都会获得正确的值。

请搜索一个完整的答案,并解释lambada方法如何与用户Isaac 配合使用。是我。

希望这对您有帮助...