How to dynamically hide and show html <tr> - razor-pages

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;
}
}