带有子组件的 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">&nbsp;&nbsp; &nbsp; ...&nbsp; &nbsp; <td>@entAddModel.Label</td> // more concise than Arae.EntAddModelsList[i].Label&nbsp; &nbsp; ...&nbsp; &nbsp; <button class="btn btn-primary table-btn" @onclick="@(() => UpdateAddress(entAddModel))">&nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-edit"></i>&nbsp; &nbsp; </button></tr>}@code {&nbsp; &nbsp; async ValueTask UpdateAddress(object entAddModel) // Change object to the correct type&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; }}边注：要绑定到复选框，请使用如下内容：&nbsp;<input type="checkbox" checked @bind="entAddModel.Prim">

Answer 2

首先，您必须像这样在循环中定义一个局部变量：@for (int i = 0; i < Arae.EntAddModelsList.Count(); i++)&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp;var local = i;&nbsp; &nbsp;}并在 lambda 表达式中使用它代替 i；至于你的问题：像这样定义你的锚元素：<a href="" id="@i" class="btn btn-primary table-btn" @onclick="@(() =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; UpdateAddress(local))">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-edit"></i>&nbsp;</a>并在@code块中添加以下内容：private Task UpdateAddress(int i){}