根据 Blazor WebAssembly 中的模型显示/隐藏 div答案

【问题标题】：Show/hide a div based on the model in Blazor WebAssembly根据 Blazor WebAssembly 中的模型显示/隐藏 div
【发布时间】：2021-05-18 12:29:09
【问题描述】：

我正在使用 Blazor WebAssembly 创建我的第一个生产项目。我很难找到一种方法来更改视图别名 DOM。基本上，我有一个带有表单的 Razor 组件。用户可以多次添加一些信息。

图片中的“添加发布输出”是

_model.PublicationOutputs = new List<Domain.PublicationOutput>();

当用户点击按钮时，我会在列表中添加一个新项目

<button class="btn btn-outline-primary" type="button" 
@onclick="@(() => _model.PublicationOutputs.Add(new Domain.PublicationOutput()))">
Add Publication Output
</button>

然后有一个foreach 来显示新表单。

@foreach (var item in _model.PublicationOutputs)
{
    i++;

    <div class="row">
        <div class="col-2">
            <div class="form-group">
                <label class="font-weight-bold text-secondary">Stage</label>
                <p>@i</p>
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label for="outputTypeSelect" 
                class="font-weight-bold text-secondary">
                Output type</label>
                <div class="select">
                    <select @bind="item.OutputTypeId" id="outputTypeSelect">
                        <option value="0">Select an option</option>
                        @if (_listOut != null)
                            foreach (var itm in _listOut)
                            {
                                <option value="@itm.ID">@itm.Name</option>
                            }
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="itemShort" class="font-weight-bold text-secondary">
                Short title</label>
                <InputText @bind-Value="item.ShortDescription" 
                           class="form-control" id="itemShortDescription" />
            </div>
        </div>
    </div>
}

我想你明白了。完整的结果如下图

当用户从“输出类型”中选择一个特定值时，我想显示一个div 和一个InputText，以便他可以添加更多详细信息。我尝试以两种方式做到这一点，但没有达到结果。

第一种方法是使用style 和display 来显示或隐藏div 和InputText，但它不起作用。

<div class="form-group" 
     style="@(item.OutputTypeId == 2 ? "display: ;" : "display: none;")">
    <label for="itemDetails" class="font-weight-bold text-secondary">
    Details</label>
    <InputText @bind-Value="item.Details" class="form-control" id="itemDetails" />
</div>

然后，我尝试使用if

@if (item.OutputTypeId == 2) {
    <div class="form-group">
        <label for="itemDetails" class="font-weight-bold text-secondary">
        Details</label>
        <InputText @bind-Value="item.Details" 
                   class="form-control" id="itemDetails" />
    </div>
}

but again, when the select changed, the div is not displaying.如果我在label 中使用相同的if，它就可以工作。因此，当用户从 select 中选择一个新选项时，label 会更改文本。

<label for="itemTarget" class="font-weight-bold text-secondary" id="labelTarget">
    @(item.OutputTypeId == 3 ? "Target Journal" : "Target Congress")
</label>

如何根据模型在 Blazor 中显示/隐藏一些 div 或 HTML？另外，如何根据模型对同一 HTML 的多个实例进行处理？

【问题讨论】：

已经有很多代码了，我们还需要“添加发布输出”部分吗？但我们看不到 OutputTypeId 如何/在何处更改。
是的，你是对的。我已经更新了帖子
另外，是的，“添加发布输出”是我更改选择的地方。每个块都有一个选择。
您需要在选择更改后调用StateHasChanged()，因此您需要将@onchange="MyChangeCallback" 事件绑定到C# 方法。在这里使用@bind 是不正确的。
如果我调用@onchange="MyChangeCallback"，如何将所选值保存在正确的项目中？

标签： blazor blazor-webassembly

【解决方案1】：

对于@if (item.OutputTypeId == 2)，您必须使用StateHasChanged 或更好地更新组件视图

await InvokeAsync(StateHasChanged);

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/rendering?view=aspnetcore-5.0#when-to-call-statehaschanged

对于 div，使用显示/隐藏变量：

 private bool ShowMyFoo   {get;set;} = false;
       private void ShowFoo()
       {
           ShowMyFoo    =   !ShowMyFoo;
       }   
for <div hidden="@ShowMyFoo">my code</p>

https://blazorfiddle.com/s/v4y8ilfm

【讨论】：