在C# Razor 6.0页面后台代码中访问HTML控件的实现方法

方案1：使用Blazor原生双向绑定（最推荐） #

Blazor本身自带双向绑定能力，完全不需要沿用WebForm的runat="server"、FindControl逻辑，实现更简单：

1. 在页面的@code代码块或对应的.cs后台类中定义绑定属性：

// 存储单选组选中值
public int SelectedAnomalyLevel { get; set; }

2. 修改原单选按钮代码，删除runat="server"属性，增加@bind绑定到上面定义的属性：

<input type="radio" id="radioAlertOnly" name="AnomalyLevel" value="0" @bind="SelectedAnomalyLevel" />
<label for="radioAlertOnly">仅告警</label>

<input type="radio" id="radioIsolateAndAlert" name="AnomalyLevel" value="1" @bind="SelectedAnomalyLevel" />
<label for="radioIsolateAndAlert">隔离+告警</label>

<input type="radio" id="radioRemediateAndAlert" name="AnomalyLevel" value="2" @bind="SelectedAnomalyLevel" />
<label for="radioRemediateAndAlert">修复+告警</label>

<input type="radio" id="radioRemediateAndLog" name="AnomalyLevel" value="3" @bind="SelectedAnomalyLevel" />
<label for="radioRemediateAndLog">修复+日志</label>

3. 读写操作直接操作属性即可：

• 读取选中值：直接获取SelectedAnomalyLevel的返回值
• 设置选中值：直接给SelectedAnomalyLevel赋值即可，比如初始化时设置SelectedAnomalyLevel = 1，对应单选按钮会自动选中

方案2：使用@ref引用单个控件 #

如果需要直接操作单选按钮DOM对象，Blazor提供@ref指令替代WebForm的FindControl：

1. 在后台代码中定义对应单选按钮的引用字段：

using Microsoft.AspNetCore.Components.Forms;

private HtmlInputRadio radioAlertOnly;
private HtmlInputRadio radioIsolateAndAlert;
private HtmlInputRadio radioRemediateAndAlert;
private HtmlInputRadio radioRemediateAndLog;

2. 给每个单选按钮增加@ref绑定：

<input type="radio" id="radioAlertOnly" name="AnomalyLevel" value="0" @ref="radioAlertOnly" />
<!-- 其余三个单选按钮同理绑定对应字段 -->

3. 读写逻辑：

• 读取选中值：遍历四个引用对象，找到Checked属性为true的对象，取其Value属性即可
• 设置选中值：把对应单选按钮的Checked属性设为true，其余设为false即可

注意：FindControl是ASP.NET WebForm专属API，Blazor框架本身不提供该方法，Blazor.WebForm.UI仅做了基础WebForm控件的兼容，没有也不会实现这个页面控件遍历查找方法，建议优先使用双向绑定方案。

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