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 $10,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

最简单的方法是引入一个布尔变量并将<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);
}

根据按钮单击隐藏/显示部分

1 个答案: