带有子组件的 Blazor 页面：如何从行 @onclick 方法按钮传递当前 HTML 表行索引或

Question

我有一个带有子组件（显示地址）的 Blazor 页面。子组件显示一个表格，最后一列显示一个带有@oncclick 的按钮以执行一个方法（即：UpdateAddress(??)）。单击按钮时，我需要将创建按钮的行索引或行中的 Entid 变量传递到 @onclick 方法中。我如何才能将这些值中的任何一个传递给方法？我知道通常您会在按钮上使用 href，但子组件不使用 @page 链接。谢谢             @for (int i = 0; i < Arae.EntAddModelsList.Count(); i++)                {                    <tr>                        <td><input type="checkbox" checked="@Arae.EntAddModelsList[i].Prim" onclick="return false" class="text-success"></td>                        <td>@Arae.EntAddModelsList[i].Label</td>                          <td>@Arae.EntAddModelsList[i].Add1</td>                        <td>@Arae.EntAddModelsList[i].EffBegDate.ToString("MM/dd/yyyy")</td>                        <a id="@i" class="btn btn-primary table-btn" @onclick="@(() => UpdateAddress(i))">                            <i class="fas fa-edit"></i>                        </a>                    </td>                    </tr>                }            }

Answer 1

我会避免使用数组：

在每一行上使用@key。

注意：我不知道 EntAddModelsList 的类型，所以我使用了对象。将其更改为项目类型。

@foreach (var entAddModel in Arae.EntAddModelsList)

{

<tr @key="entAddModel"> 

    ...

    <td>@entAddModel.Label</td> // more concise than Arae.EntAddModelsList[i].Label

    ...

    <button class="btn btn-primary table-btn" @onclick="@(() => UpdateAddress(entAddModel))">

        <i class="fas fa-edit"></i>

    </button>

</tr>

}

@code {

    async ValueTask UpdateAddress(object entAddModel) // Change object to the correct type

    {

        ...

    }

}

边注：

要绑定到复选框，请使用如下内容：

 <input type="checkbox" checked @bind="entAddModel.Prim">

Answer 2

首先，您必须像这样在循环中定义一个局部变量：

@for (int i = 0; i < Arae.EntAddModelsList.Count(); i++)

   {

       var local = i;

   }

并在 lambda 表达式中使用它代替 i；

至于你的问题：

像这样定义你的锚元素：

<a href="" id="@i" class="btn btn-primary table-btn" @onclick="@(() => 

                                              UpdateAddress(local))">

                            <i class="fas fa-edit"></i>

 </a>

并在@code块中添加以下内容：

private Task UpdateAddress(int i)

{

}