Hide/show 部分基于按钮点击

Question

我正在使用 Blazor HTML 并且我有一个 <section class="showContent"> 包含一个我只想向单击“是”选项的人显示的表单，我想隐藏该表单默认。这是我的代码：

            <h5 class="stath5"><span class="badge badge-secondary">5.</span> Business / Custom Work / Services</h5>
            <p class="forPurpose">For tax purposes</p>


            <p class="statp">Do you (or a non-member on your land) have business sales, custom work, or services of ,000 a year or more yearly turnover?</p>


            <label class="label-yes">
                <input type="radio" class="option-input radio" name="example"/>
                Yes
            </label>

            <label>
                <input type="radio" class="option-input radio" name="example" />
                No
            </label>


            @*If yes, display the following; if no, do not @* *@






    <section class="showContent">

            <p class="statp">Please specify the amount for which you have  <span class="badge badge-danger">not</span> yet paid tax:</p>


            <EditForm Model="@businessData" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">
                <FluentValidator />


                <div class="individualForms">
                    <label class="statlabel" for="businessReselling"> Business / Reselling:</label><br />
                    <InputNumber id="businessReselling" class="input" @bind-Value="@businessData.BusinessResellingGross" onwheel="this.blur()" placeholder="$BZ" autofocus />
                    <ValidationMessage For="() => businessData.BusinessResellingGross" />
        </div>

                <br /><hr class="statHR" />


                <div class="individualForms">
                    <label class="statlabel" for="pavementTax"> Pavement tax:</label><br />
                    <InputNumber id="pavementTax" class="input" @bind-Value="@businessData.PavementTaxGross" onwheel="this.blur()" placeholder="$BZ" />
            <ValidationMessage For="() => businessData.PavementTaxGross" />
                </div>


                <br /><hr class="statHR" />

                <div class="individualForms">
                    <label class="statlabel" for="customWrkServices"> Custom Work / Services:</label><br />
                    <InputNumber id="customWrkServices" for="customWrkServices" class="input" @bind-Value="@businessData.CustomWorkServicesGross" onwheel="this.blur()" placeholder="$BZ" />
                    <ValidationMessage For="() => businessData.CustomWorkServicesGross" />
        </div>


            </EditForm>

    </section>

这看起来很简单，但我尝试了网上列出的一些方法，但对我的目的不起作用。

Answer 1

最简单的方法是引入一个 bool 变量并将您的 <section> 包装在其中：

剃须刀页面：

<label class="label-yes">
    <input type="radio" class="option-input radio" name="example" @onchange="OnUpdated"/>
    Yes
</label>

@if (ShowSection)
{
    <section class="showContent">
        ...
    </section>
}

代码：

显示部分时更改 ShowSection = true，隐藏部分时更改 false：


public bool ShowSection { get; set; }

public void OnUpdated(ChangeEventArgs e)
{
    ShowSection = ((bool)e.Value);
}

Hide/show 部分基于按钮点击

Hide/show section based on buttonclick

c#

visibility

blazor