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

Question

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

我遇到的问题是我希望能够关闭每个 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 之类的？感谢所有反馈。

谢谢。

Answer 1

在 blazor 中，你每次都使用对象，你应该为警报做一个 class 并为每个改变它的属性。

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

更多更少这个：

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

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

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

Blazor @onclick event to close a single item inside a loop

c#

event-handling

dom-events

blazor

blazor-server-side