如何为动态生成或操作的HTML添加@onclick函数？

我写了一段代码，用来遍历文本字符串，把特定子串[docN]替换成包含点击事件的<span>元素，但@onclick完全没生效。代码如下：

后端替换逻辑 #

private string ReplaceCitationLinks(string text, int documentIndex)
{
    for (var i = 1; i <= documentIndex; i++)
    {
        var html = "<span class='citation-link' @onclick='() => ShowCitation(" + i + ")'>(Dokument " + i + ")</span>";
        text = text.Replace("[doc" + i + "]", html);    
    }

    return text;
}

前端调用方式 #

@((MarkupString)ReplaceCitationLinks("Test string [doc1]. Test string [doc2]", item.Citations.Count))

我只需要让字符串里的[doc1]和[doc2]变成可点击的，但点击事件就是不触发，该怎么解决？

问题根源 #

Blazor的@onclick是编译时处理的指令，不是普通HTML属性。你通过字符串拼接生成HTML再转成MarkupString的方式，Blazor不会再解析其中的@onclick——它只会被当作普通文本属性，自然无法绑定到C#方法。

正确实现方式 #

推荐两种符合Blazor机制的方案：

方案1：用RenderFragment动态构建内容（推荐）

这种方式完全遵循Blazor的组件化思想，能正确绑定事件：

private RenderFragment RenderCitationText(string text, int documentIndex)
{
    var contentParts = new List<object>();
    int currentPosition = 0;

    for (var i = 1; i <= documentIndex; i++)
    {
        string placeholder = $"[doc{i}]";
        int placeholderPos = text.IndexOf(placeholder, currentPosition);

        if (placeholderPos == -1) continue;

        // 添加占位符前的静态文本
        if (placeholderPos > currentPosition)
        {
            contentParts.Add(text.Substring(currentPosition, placeholderPos - currentPosition));
        }

        // 添加带点击事件的span组件
        int docId = i;
        contentParts.Add((RenderFragment)(builder =>
        {
            builder.OpenElement(0, "span");
            builder.AddAttribute(1, "class", "citation-link");
            builder.AddAttribute(2, "onclick", EventCallback.Factory.Create(this, () => ShowCitation(docId)));
            builder.AddContent(3, $"(Dokument {docId})");
            builder.CloseElement();
        }));

        currentPosition = placeholderPos + placeholder.Length;
    }

    // 添加剩余的静态文本
    if (currentPosition < text.Length)
    {
        contentParts.Add(text.Substring(currentPosition));
    }

    return builder =>
    {
        foreach (var part in contentParts)
        {
            if (part is string staticText)
            {
                builder.AddContent(0, staticText);
            }
            else if (part is RenderFragment dynamicPart)
            {
                builder.AddContent(0, dynamicPart);
            }
        }
    };
}

前端直接渲染这个RenderFragment即可：

@RenderCitationText("Test string [doc1]. Test string [doc2]", item.Citations.Count)

方案2：通过JavaScript绑定事件（适合快速改造）

如果不想大幅修改现有代码，可以给生成的span加标识，再用JS绑定点击事件触发C#方法：

1. 修改后端替换代码：

private string ReplaceCitationLinks(string text, int documentIndex)
{
    for (var i = 1; i <= documentIndex; i++)
    {
        var html = $"<span class='citation-link' data-doc-id='{i}'>(Dokument {i})</span>";
        text = text.Replace($"[doc{i}]", html);    
    }

    return text;
}

2. 在组件的OnAfterRenderAsync中添加JS绑定逻辑：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("bindCitationLinks");
    }
}

3. 在全局JS文件（比如wwwroot/js/site.js）中添加绑定代码：

function bindCitationLinks() {
    document.querySelectorAll('.citation-link').forEach(el => {
        el.addEventListener('click', function() {
            const docId = parseInt(this.dataset.docId);
            DotNet.invokeMethodAsync('你的项目程序集名称', 'ShowCitation', docId);
        });
    });
}

4. 确保ShowCitation方法能被JS调用：

[JSInvokable]
public void ShowCitation(int docId)
{
    // 你的原有业务逻辑
}

注意点 #

• 方案1是Blazor官方推荐的方式，类型安全且事件绑定更可靠；
• 方案2要注意绑定时机，必须在元素渲染完成后执行JS代码，否则会找不到元素。

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