Blazor Server端如何将HTML隐藏字段绑定到对象属性？

问题详情 #

需要将HTML隐藏字段绑定到对象属性，尝试代码时，若给隐藏字段添加value="role.RoleId"，Visual Studio会提示因使用@bind无法同时使用value属性；同时当前代码循环生成多个相同id的隐藏字段，存在逻辑问题。

尝试的原代码：

<!--ForeignKeyOptions-->
<div class="mb-3">
    <label for="foreignkeyoptions"
           class="input-group input-group-static">
        ForeignKeyOptions
    </label>
    <div class="btn-group" role="group">
        @foreach (Role? role in roleRepository
                                    .GetAll(CancellationToken.None))
        {
            <button type="button" 
                class="btn bg-gradient-primary">
                @role?.Name
            </button>
            <input type="hidden" 
                id="foreignkeyoptions"
                @bind="Test.ForeignKeyOptions" />
        }
    </div>
</div>

解决方案 #

核心问题分析 #

1. @bind是Blazor的语法糖，会自动生成value属性绑定和onchange事件处理逻辑，因此手动指定value会产生冲突。
2. 循环生成多个相同id的隐藏字段违反HTML规范，且会导致绑定逻辑混乱——同一属性不需要多个绑定载体。

推荐实现方式 #

通过按钮点击事件直接更新绑定属性，仅保留一个隐藏字段完成绑定：

<!--ForeignKeyOptions-->
<div class="mb-3">
    <label for="foreignkeyoptions"
           class="input-group input-group-static">
        ForeignKeyOptions
    </label>
    <div class="btn-group" role="group">
        @foreach (Role? role in roleRepository.GetAll(CancellationToken.None))
        {
            <button type="button" 
                    class="btn bg-gradient-primary"
                    @onclick="() => Test.ForeignKeyOptions = role.RoleId">
                @role?.Name
            </button>
        }
        <!--仅需一个隐藏字段绑定目标属性-->
        <input type="hidden" 
               id="foreignkeyoptions"
               @bind="Test.ForeignKeyOptions" />
    </div>
</div>

说明：点击按钮时直接给Test.ForeignKeyOptions赋值，隐藏字段仅作为属性的绑定载体，既规避了@bind与value的冲突，也解决了重复id的问题。

备选手动绑定方式（不推荐） #

若需手动控制绑定逻辑，可放弃@bind，手动设置value和onchange事件，但需自行处理值更新：

<input type="hidden" 
       id="foreignkeyoptions"
       value="@Test.ForeignKeyOptions"
       @onchange="(e) => Test.ForeignKeyOptions = e.Value.ToString()" />

此方式需额外在按钮点击事件中更新Test.ForeignKeyOptions的值，不如推荐方案简洁。

内容的提问来源于stack exchange，提问作者Matías Alejandro Novillo