时间戳

首页 > 解决方案 > 如何在 Blazor RenderFragment CodeBehind 上正确添加 OnClick 处理程序

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

问题描述

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

如何在渲染片段构建器中正确添加 onclick？

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

标签： asp.netblazorblazor-server-sideblazor-webassembly

解决方案

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)

推荐阅读