如何在Blazor RenderFragment代码后置中正确添加OnClick事件处理器

你现在用AddMarkupContent直接拼接HTML字符串的写法无法触发事件，原因是@onclick是Razor模板的编译期语法糖，仅在.razor文件编译时会被Blazor处理为框架内置的事件绑定逻辑。直接写入HTML字符串的@onclick只会被当作普通的自定义HTML属性，浏览器和Blazor运行时都不会识别为事件回调，自然无法触发。

不要用AddMarkupContent拼接带事件的元素，改用RenderTreeBuilder的原生方法分步构建元素和绑定事件，示例代码如下：

RenderFragment template = builder =>
{
    // 打开button元素，序列编号在当前RenderFragment内唯一即可
    builder.OpenElement(0, "button");
    // 添加class属性
    builder.AddAttribute(1, "class", "btn btn-success");
    // 绑定onclick事件，属性名直接写onclick不需要加@前缀
    builder.AddAttribute(2, "onclick", () => OnToastClick(toastDetail.Key));
    // 添加按钮文本内容
    builder.AddContent(3, toastDetail.Key);
    // 关闭button元素
    builder.CloseElement();
};

• 每个构建方法的序列编号推荐用固定的静态数值，不要用动态生成的变量，否则会影响Blazor的差异对比性能
• 如果需要额外控制事件行为，可以添加对应属性：
  • 阻止事件冒泡：builder.AddEventStopPropagationAttribute(4, "onclick", true);
  • 阻止默认行为：builder.AddEventPreventDefaultAttribute(5, "onclick", true);

内容的提问来源于stack exchange，提问作者Raven