Blazor中如何动态将控件ID传入C#的onchange事件处理函数？

我正在将现有ASP.NET应用迁移到Blazor，现有表单结构如下（仅展示一行示例）：

<table width='400px' style="border-width:2" ><!-- Start Hub table 
                <tr>
                    <td>Role</td>
                    <td>Name</td>
                    <td>Phone</td>
                    <td>email / mobile</td>
                </tr>
                <tr>
                    <td style="width:140px;">Event Hub Manager</td>
                    <td><input id="block1_role1_names" @onchange=@(async(e) => await update_details("block1_role1_names", e)) value="@getContact("block1_role1_names")" class="NameColumn" /></td>
                    <td  style="width:80px;">3664 8462</td>
                    <td><input id="block1_role1_phone" @onchange=@(async(e) => await update_details("block1_role1_phone", e)) value="@getContact("block1_role1_phone")" class="PhoneColumn" /></td>
                </tr>
        </table>

对应的C#逻辑：

protected async Task update_details(string controlId, ChangeEventArgs controlEvent)
{
    // 根据ID和值保存到JSON
}

private string getContact(string Id)
{
    // 根据ID从JSON文件获取值
    return "get from json file based on id";
}

当前功能正常，但表单有50多行，每行包含2个输入框，每次都要手动传入控件ID，希望能动态传递控件ID，不用重复手写，比如：

<input id="block1_role1_names" @onchange=@(async(e) => await update_details(ID_OF_THE_CONTROL, e)) value="@getContact(ID_OF_THE_CONTROL)" class="NameColumn" />

尝试传入this时，它指向的是页面而非文本框，请问如何将文本框的ID自动传入这两个函数？

方法1：抽离ID为变量复用 #

把每个输入框的ID定义为局部变量，在输入框的属性中复用变量，避免重复手写ID字符串：

@{
    var nameInputId = "block1_role1_names";
    var phoneInputId = "block1_role1_phone";
}
<tr>
    <td style="width:140px;">Event Hub Manager</td>
    <td><input id="@nameInputId" @onchange=@(async(e) => await update_details(nameInputId, e)) value="@getContact(nameInputId)" class="NameColumn" /></td>
    <td  style="width:80px;">3664 8462</td>
    <td><input id="@phoneInputId" @onchange=@(async(e) => await update_details(phoneInputId, e)) value="@getContact(phoneInputId)" class="PhoneColumn" /></td>
</tr>

这种方式无需修改原有C#逻辑，只是通过变量减少重复输入，适合快速改造现有表单。

方法2：封装可复用输入组件（推荐） #

针对大量重复的输入框，封装成Blazor组件是更高效的方案，将ID、样式、数据交互逻辑统一封装：

创建ContactInput.razor组件 #

<input id="@InputId" 
       @onchange=@HandleValueChange 
       value="@CurrentValue" 
       class="@CssClass" />

@code {
    [Parameter, Required] public string InputId { get; set; }
    [Parameter] public string CssClass { get; set; }

    private string CurrentValue => getContact(InputId);

    private async Task HandleValueChange(ChangeEventArgs e)
    {
        await update_details(InputId, e);
    }

    // 直接调用父组件的方法，或者通过依赖注入/EventCallback传递逻辑
    [CascadingParameter] private YourParentComponent Parent { get; set; }

    private string getContact(string id) => Parent.getContact(id);
    private async Task update_details(string id, ChangeEventArgs args) => await Parent.update_details(id, args);
}

父组件中使用 #

<tr>
    <td style="width:140px;">Event Hub Manager</td>
    <td><ContactInput InputId="block1_role1_names" CssClass="NameColumn" /></td>
    <td style="width:80px;">3664 8462</td>
    <td><ContactInput InputId="block1_role1_phone" CssClass="PhoneColumn" /></td>
</tr>

这种方式彻底消除重复代码，后续维护和扩展更方便，适合大量重复输入场景。

方法3：通过@ref获取控件实例（不推荐） #

如果一定要从控件实例获取ID，可以用@ref引用输入框，但需注意控件渲染时机：

<input @ref="nameInputRef" id="block1_role1_names" @onchange=@(async(e) => await update_details(nameInputRef.Id, e)) value="@getContact(nameInputRef.Id)" class="NameColumn" />

@code {
    private ElementReference nameInputRef;
}

⚠️ 注意：ElementReference的Id属性在组件渲染完成后才有效，首次渲染时可能为空，可靠性不如前两种方法，不推荐使用。

内容的提问来源于stack exchange，提问作者Ali