如何在Blazor组件中获取输入控件的Id属性

要获取Blazor组件中输入控件的Id，分两种场景处理：

1. 手动指定Id的情况 #

如果已经给输入控件手动设置了id属性，直接在C#代码中复用该值即可，无需额外操作：

<input @ref="txtCounterRef" id="fixed-txt-counter-id" @bind="CounterValue" />

@code {
    private ElementReference txtCounterRef;
    private int CounterValue { get; set; }
    // 直接使用手动指定的Id
    private string inputId = "fixed-txt-counter-id";
}

2. Blazor自动生成Id的情况 #

如果Id是Blazor自动生成的（比如未手动指定Id、使用表单组件自动生成等），需要通过JS互操作获取，步骤如下：

步骤1：绑定控件引用并编写C#逻辑 #

在组件中给输入控件添加@ref绑定，然后在组件渲染完成后调用JS获取Id：

<input @ref="txtCounterRef" @bind="CounterValue" />
<p>输入控件的Id：@inputId</p>

@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private ElementReference txtCounterRef;
    private int CounterValue { get; set; }
    private string inputId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用JS函数获取控件Id
            inputId = await JSRuntime.InvokeAsync<string>("getElementId", txtCounterRef);
            StateHasChanged(); // 更新UI显示获取到的Id
        }
    }
}

步骤2：添加JS函数 #

在项目的入口HTML文件中添加全局JS函数：

• WebAssembly项目：wwwroot/index.html
• Server项目：Pages/_Host.cshtml

<script>
    window.getElementId = (element) => {
        return element.id;
    };
</script>

关键说明 #

• 必须在OnAfterRenderAsync中执行JS调用：只有组件渲染完成后，ElementReference才会指向真实的DOM元素，此时才能获取到Id。
• 使用firstRender判断：避免每次组件渲染都重复调用JS，仅在首次渲染时执行一次。

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