Blazor InteractiveServer动态构建HTML按钮如何调用OnSelectPin方法？

问题出在你用StringBuilder拼接的HTML是静态文本，Blazor不会处理里面的@onclick指令——因为这些DOM元素是Azure Maps直接渲染的，不在Blazor的组件树里，自然绑定不上C#方法。给你两种靠谱的解决思路：

方案一：用Blazor组件渲染弹窗内容（推荐） #

既然是Blazor应用，尽量用组件来构建UI，这样能保留Blazor的事件绑定能力。

1. 新建一个弹窗内容组件（比如PinClusterPopup.razor）：

<div style="padding:10px;color:black">
    <p>Click to go to the specific profile</p>
    <ul>
        @foreach (var pin in Pins)
        {
            <li>
                <button @onclick="() => OnSelectPin.InvokeAsync(ConvertToInt(pin.Properties["Id"]))">
                    @ConvertToString(pin.Properties["Name"])
                </button>
            </li>
        }
    </ul>
</div>

@code {
    [Parameter, Required]
    public IEnumerable<YourPinType> Pins { get; set; } // 替换成你实际的pin类型

    [Parameter, Required]
    public EventCallback<int> OnSelectPin { get; set; }

    // 把你的转换方法移到这里，或者复用组件外的工具方法
    private string ConvertToString(object value) => value?.ToString() ?? string.Empty;
    private int ConvertToInt(object value) => int.TryParse(value?.ToString(), out var id) ? id : 0;
}

2. 在主组件里，把组件渲染成DOM元素传给Azure Maps弹窗：

// 构建弹窗组件的渲染片段
var popupContent = new RenderFragment(builder =>
{
    builder.OpenComponent<PinClusterPopup>(0);
    builder.AddAttribute(1, nameof(PinClusterPopup.Pins), clusters);
    builder.AddAttribute(2, nameof(PinClusterPopup.OnSelectPin), EventCallback.Factory.Create<int>(this, OnSelectPin));
    builder.CloseComponent();
});

// 将渲染片段转换成DOM元素（需要依赖Blazor的渲染器）
var renderer = (IComponentRenderer)Services.GetRequiredService(typeof(IComponentRenderer));
var popupElement = new DivElement();
await renderer.RenderComponentAsync<ComponentBase>(popupElement, popupContent);

// 给Azure Maps弹窗设置内容
popup.SetContent(popupElement);

方案二：用原生JS事件+JSInterop调用C#方法 #

如果不想新建组件，也可以用原生JS事件触发，再通过JSInterop调用你的C#方法。

1. 修改HTML拼接逻辑，换成原生onclick并携带id：

var html = new StringBuilder("<div style=\"padding:10px;color:black\"><p>Click to go to the specific profile</p><ul>");
foreach (var pin in clusters)
{
    var name = ConvertToString(pin.Properties["Name"]);
    var id = ConvertToInt(pin.Properties["Id"]);
    // 用data-id存id，点击时调用JS函数
    html.Append($"<li><button data-id=\"{id}\" onclick=\"triggerSelectPin(this)\">{name}</button></li>");
}
html.Append("</ul></div>");

2. 在wwwroot/index.html（或_Host.cshtml）中添加JS函数：

<script>
    function triggerSelectPin(btn) {
        const id = parseInt(btn.dataset.id);
        // 调用Blazor组件里的JSInvokable方法
        window.Blazor.invokeMethodAsync('OnSelectPin', id);
    }
</script>

3. 给你的C#方法加上[JSInvokable]特性，允许JS调用：

[JSInvokable]
private void OnSelectPin(int id)
{
    // 原来的逻辑
}

两种方案里，方案一更符合Blazor的开发模式，后续维护和扩展更方便；方案二适合快速改造现有代码。

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