How to dynamically hide and show html <tr>

Question

How to add code in OnInitializedAsync to show/hide the in C# razor pages?

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

@code {  
    protected override void OnInitializedAsync()
    {
        // code to show <tr> with id="rowId"
    }   
}

Answer 1

With the following code, when the component is initialized the table row is hidden. When the button is pressed it becomes visible.

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

<button @onclick="OnHideRowBtnClicked">Hide row</button>

@code {  
    private bool _rowVisible;

    protected override void OnInitializedAsync()
    {
        // set _rowVisible to true if row should be visible or false if row should be hidden
        _rowVisible = true;
    }   

    private void OnHideRowBtnClicked()
    {
        _rowVisible = false;
    }
}

Another approach using the style attribute:

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

<button @onclick="OnHideRowBtnClicked">Hide row</button>
<button @onclick="OnShowRowBtnClicked">Show row</button>

@code {  
    private string? _rowStyle;

    protected override void OnInitializedAsync()
    {
    }   

    private void OnHideRowBtnClicked()
    {
        _rowStyle = "display: none;";
    }

    private void OnShowRowBtnClicked()
    {
        _rowStyle = null;
    }
}