Как я могу показать или скрыть элемент управления, основанный на элементе выбора в Blazor? - PullRequest
Новая
       4

Как я могу показать или скрыть элемент управления, основанный на элементе выбора в Blazor?

0 голосов
/ 01 апреля 2020

У меня есть форма, которая содержит список выбора с 3 значениями - Trade, Sell и Give Away. Существует еще одно текстовое поле с названием «Цена продажи за единицу», которое должно отображаться только при выборе «Продать» в списке выбора. Как я могу добиться этого в Blazor Server Side? 

<div class="form-group">
     <label for="uom">Trade / Sell / Give Away</label>
     <select id="uom" class="form-control" @bind="@ItemForTradeObject.TradeOrSell">
     <option value="">-- Select a Trade/Sell --</option>
     @foreach (Project.Shared.enums.TradeOrSell tos in (Project.Shared.enums.TradeOrSell[])Enum.GetValues(typeof(Project.Shared.enums.TradeOrSell)))
     {
        <option value="@tos">@tos</option>
     }
    </select>
</div>

<div class="form-group">
    <label for="taskName">Sell Price Per Unit (£)</label>
    <InputNumber id="sellPrice" class="form-control" @bind-Value="ItemForTradeObject.SellPricePerUnit" />
    <ValidationMessage For="@(() => ItemForTradeObject.SellPricePerUnit)" />
</div>

1 Ответ

1 голос
/ 01 апреля 2020

Вы просто добавляете @if(ItemForTradeObject.TradeOrSell == EnumValueYouWantToShow), проверяя, является ли значение значением требуемого перечисления.

Пожалуйста, предоставьте перечисление TradeOrSell, поэтому мне не нужно угадывать, как называется перечисление вы используете. 

<div class="form-group">
     <label for="uom">Trade / Sell / Give Away</label>
     <select id="uom" class="form-control" @bind="@ItemForTradeObject.TradeOrSell">
     <option value="">-- Select a Trade/Sell --</option>
     @foreach (Project.Shared.enums.TradeOrSell tos in (Project.Shared.enums.TradeOrSell[])Enum.GetValues(typeof(Project.Shared.enums.TradeOrSell)))
     {
        <option value="@tos">@tos</option>
     }
    </select>
</div>

@* Check if the value equals the enum you want*@
@if(ItemForTradeObject.TradeOrSell == Project.Shared.enums.TradeOrSell.Sell){
    <div class="form-group">
        <label for="taskName">Sell Price Per Unit (£)</label>
        <InputNumber id="sellPrice" class="form-control" @bind-Value="ItemForTradeObject.SellPricePerUnit" />
        <ValidationMessage For="@(() => ItemForTradeObject.SellPricePerUnit)" />
    </div>
}
...