Blazor中如何传递控件引用以避免重复传入ID参数

有两种可行的方式解决重复输入ID的问题，无需动态生成控件：

方法一：使用局部变量复用ID #

这是最直接简洁的方式，给每个输入框的ID定义一个局部变量，之后在控件的各个属性中引用该变量即可，ID仅需编写一次：

@{
    var inputId = "block1_role1_names";
}
<input id="@inputId" 
       @onchange=@(async(e) => await update_details(inputId, e)) 
       value="@getContact(inputId)" 
       class="NameColumn" />

每个文本框都按此模式处理，将inputId替换为对应控件的ID值即可，彻底避免重复三次书写同一ID。

方法二：通过元素引用（ElementReference）获取ID #

如果希望通过控件引用直接获取ID，可以使用Blazor的@ref指令获取元素引用，之后在函数中访问引用的Id属性：

首先在组件代码块中定义对应输入框的ElementReference变量：

@code {
    private ElementReference block1Role1NamesInput;
}

然后在输入控件中绑定@ref，并在函数中使用该引用：

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

同时需要修改update_details函数，使其接收ElementReference参数并从中提取ID：

private async Task update_details(ElementReference inputRef)
{
    var inputId = inputRef.Id;
    // 原有业务逻辑，使用inputId完成处理
}

这种方式同样能实现只写一次ID，通过引用获取ID值。

两种方法都无需动态生成控件，推荐第一种方法，代码更简洁易维护。

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