时间戳

首页 > 解决方案 > 如何根据 Blazor 中的选择控件显示或隐藏控件

c# - 如何根据 Blazor 中的选择控件显示或隐藏控件

问题描述

我有一个表单，其中包含一个选择列表框，其中包含 3 个值 - 交易、出售和赠送。还有 1 个名为 Sell Price Per Unit 的文本框，只有在选择列表中选择 Sell 时才可见。如何在 Blazor 服务器端实现这一点？

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

标签： c#blazorblazor-server-side

解决方案

您只需添加@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>
}

推荐阅读