Blazor @onclick 事件以关闭循环内的单个项目答案

【问题标题】：Blazor @onclick event to close a single item inside a loopBlazor @onclick 事件以关闭循环内的单个项目
【发布时间】：2021-09-13 09:37:08
【问题描述】：

我正在使用带有 Blazor 服务器应用的 Razor 组件。该应用程序轮询服务器上的警报消息。服务器可能会发回几条消息，我会循环这些消息。 div 上的类有一个“显示”和“隐藏”，它负责隐藏元素。

我遇到的问题是我希望能够关闭每个 alertmessage 而不是全部 - 这发生在下面的简化代码中：

--snip
@if(alert.valid == true){
    @foreach(var alert in alerts){
        @if(alert.type == "alert")
        <div id="alertmessage" class="@show">
            <button type="button" @onclick="@show">Hide this element</button>
        </div>
    
    }
}
@code{
    private string value { get; set;} = "show";
    private void Show() {
        value = "hidden";
     }
}

根据上面的示例，如果有多个警报，方法 Show() 将关闭所有框，它会产生 x 计数 <div id="alertmessage" 我明白了，但是有没有办法像抓住那个特定元素alert.id 什么的？感谢所有反馈。

谢谢。

【问题讨论】：

标签： c# event-handling dom-events blazor blazor-server-side

【解决方案1】：

在 blazor 中，您每次都使用对象，您应该为警报创建一个类，并在每个对象上更改其属性。

页面必须包含一个警报对象列表作为属性。

更多更少：

@if(alert.valid == true){
    @foreach(var alert in alerts){
        
        <div id="alertmessage" class="@show">
            <button type="button" hidden="@alert.hidden" @onclick="()=>show(alert)">Hide this element</button>
        </div>
    
    }
}
@code{
    private string value { get; set;} = "show";
    
    
    private List<Alert> alerts = new();
    private void Show(Alert alert) {
        alert.hidden = true;
        alert.message= "whatever"
     }
     
     
     public class Alert{
     public String message = "whatever"
     public bool hidden = false;
     //other stuff
     }
}

如果您想将逻辑与演示分开，您可以在其自己的类文件中声明警报逻辑。

【讨论】：