如何在 Blazor RenderFragment CodeBehind 上正确添加 OnClick 处理程序

Question

作为项目特定需求的一部分，我必须在 Blazor 代码隐藏（.cs 文件）上使用渲染片段。使用下面的代码，我能够正确呈现一个按钮，但是 @onclick 处理程序似乎无法正常工作或被点击。

如何在 renderfragment 构建器中正确添加 onclick？

RenderFragment template = builder =>
{
    builder.AddMarkupContent(1, $"<button class='btn btn-success' @onclick='() => OnToastClick({toastDetail.Key})'>{toastDetail.Key}</button>");
};

Answer 1

AddMarkupContent() 添加 HTML 标记，它不解析 Razor 内容。

我能想到的最好的：

RenderFragment template(IComponent owner, ToastDetail toastDetail)
{
    return builder =>
    {
        builder.OpenElement(1, "button");
        builder.AddAttribute(2, "class", "btn btn-success");
        builder.AddAttribute(3, "onclick",
            Microsoft.AspNetCore.Components.EventCallback.Factory.Create(owner, 
               () => OnToastClick(toastDetail.Key)));
        builder.AddContent(4, toastDetail.Key);
        builder.CloseElement();
    };
}

然后你就可以像

一样使用它了

  @template(this, toastDetail)

如何在 Blazor RenderFragment CodeBehind 上正确添加 OnClick 处理程序

How to properly add an OnClick handler on Blazor RenderFragment CodeBehind

asp.net

blazor

blazor-server-side

blazor-webassembly