如何在C# Razor页面中动态隐藏和显示HTML <tr>元素？

有几种常用实现方式：

• 原生JavaScript操作DOM样式
  直接通过元素ID获取<tr>，修改其style.display属性：

// 显示<tr>元素
document.getElementById('rowId').style.display = 'table-row';
// 隐藏<tr>元素
document.getElementById('rowId').style.display = 'none';

• CSS类切换方式
  先定义控制隐藏的CSS类：

.hidden-row {
    display: none;
}

再通过JavaScript添加/移除类来控制显示：

// 隐藏元素
document.getElementById('rowId').classList.add('hidden-row');
// 显示元素
document.getElementById('rowId').classList.remove('hidden-row');

在Blazor Razor页面中，不能直接在OnInitializedAsync里操作DOM（此时组件尚未渲染到浏览器DOM中），需要利用Blazor的数据绑定机制实现：

实现步骤： #

1. 在组件代码块定义布尔变量，用于控制<tr>的显示状态
2. 在OnInitializedAsync中根据业务逻辑设置变量值
3. 在<tr>元素上通过条件渲染或样式绑定控制显示

代码示例： #

方式1：条件渲染（@if）

<div class="form-row">
    <table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
        <tbody>
            @if (IsRowVisible)
            {
                <tr id="rowId">
                    <td>
                        <label>test</label>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@code {  
    private bool IsRowVisible { get; set; } = false;

    protected override async Task OnInitializedAsync()
    {
        // 根据业务逻辑设置显示状态，示例直接设为true
        IsRowVisible = true;
        
        // 有异步操作（如调用API）时添加await
        // await FetchDataAsync();
    }   
}

方式2：样式绑定

若需保留<tr>在DOM中仅隐藏，可使用style绑定：

<div class="form-row">
    <table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
        <tbody>
            <tr id="rowId" style="@(IsRowVisible ? "display: table-row;" : "display: none;")">
                <td>
                    <label>test</label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code {  
    private bool IsRowVisible { get; set; } = false;

    protected override async Task OnInitializedAsync()
    {
        IsRowVisible = true;
    }   
}

说明： #

OnInitializedAsync是Blazor组件的初始化生命周期方法，此时组件未完成DOM渲染，直接调用JavaScript操作DOM会找不到元素。通过数据绑定，Blazor会在组件渲染时自动根据变量值更新UI状态。

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