Blazor JsInterop传递DOM元素遇序列化错误，寻求更佳实现方案

你遇到的问题本质是：Blazor的ElementReference和IJSObjectReference都需要特定的内部标识（__internalId/__jsObjectId）才能被.NET正确反序列化，而原生HTMLElement对象没有这些标识，直接传递就会报错。以下是几种更优的处理方式：

方案1：提前注册ElementReference映射（推荐，符合Blazor设计） #

如果Blazor可以参与元素的创建流程，先在组件中渲染元素并拿到ElementReference，再传给JS保存映射关系，事件触发时传回对应的ElementReference。

Blazor组件代码 #

@inject IJSRuntime JSRuntime

<div @ref="gridContainer" class="grid-stack"></div>

@code {
    private ElementReference gridContainer;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 初始化gridstack并传入容器的ElementReference
            await JSRuntime.InvokeVoidAsync("initGridStack", gridContainer);
        }
    }

    [JSInvokable]
    public void OnWidgetAdded(ElementReference widgetElement)
    {
        // 处理新增的Widget元素
        Console.WriteLine($"Widget added: {widgetElement.Id}");
    }
}

JavaScript代码 #

let gridStackInstance;
// 存储DOM元素到Blazor ElementReference的映射
const elementRefMap = new Map();

window.initGridStack = async (containerRef) => {
    gridStackInstance = GridStack.init({ container: containerRef });

    // 监听added事件
    gridStackInstance.on('added', async (event, items) => {
        items.forEach(item => {
            const blazorElementRef = elementRefMap.get(item.el);
            if (blazorElementRef) {
                // 传回已注册的ElementReference
                containerRef.invokeMethodAsync("OnWidgetAdded", blazorElementRef);
            }
        });
    });
};

// 提供注册方法，让Blazor创建Widget元素时传入映射
window.registerWidgetElement = (widgetRef, domElement) => {
    elementRefMap.set(domElement, widgetRef);
};

方案2：传递元素唯一标识（简单直接） #

如果JS动态创建元素，无法提前通过Blazor获取ElementReference，可以给每个元素添加唯一标识（如自定义data-*属性），事件触发时传递标识，Blazor再通过标识查询元素。

JavaScript代码 #

gridStackInstance.on('added', async (event, items) => {
    const widgetIds = items.map(item => {
        // 生成唯一ID
        const widgetId = `gs-widget-${crypto.randomUUID()}`;
        item.el.dataset.widgetId = widgetId;
        return widgetId;
    });
    // 传递ID数组到Blazor
    await interopReference.invokeMethodAsync("OnWidgetAdded", widgetIds);
});

// 辅助方法：通过ID获取元素
window.getWidgetElementById = (widgetId) => {
    return document.querySelector(`[data-widget-id="${widgetId}"]`);
};

Blazor代码 #

[JSInvokable]
public async Task OnWidgetAdded(string[] widgetIds)
{
    foreach (var id in widgetIds)
    {
        // 通过ID获取ElementReference
        var widgetElement = await JSRuntime.InvokeAsync<ElementReference>("getWidgetElementById", id);
        // 处理元素
    }
}

方案3：用IJSObjectReference包装DOM元素（适合动态元素） #

如果必须传递DOM对象本身，可以用Blazor的DotNet.createJSObjectReference方法将原生DOM元素包装成IJSObjectReference，这样.NET就能正确反序列化。

JavaScript代码 #

gridStackInstance.on('added', async (event, items) => {
    for (const item of items) {
        // 包装DOM元素为IJSObjectReference
        const wrappedElement = await DotNet.createJSObjectReference(item.el);
        // 传递到Blazor
        await interopReference.invokeMethodAsync("OnWidgetAdded", wrappedElement);
        // 用完及时释放，避免内存泄漏
        wrappedElement.dispose();
    }
});

Blazor代码 #

[JSInvokable]
public async Task OnWidgetAdded(IJSObjectReference widgetElement)
{
    // 调用DOM元素的方法，比如获取属性
    var className = await widgetElement.InvokeAsync<string>("getAttribute", "class");
    Console.WriteLine($"Widget class: {className}");
    
    // 释放对象
    await widgetElement.DisposeAsync();
}

注意事项 #

• 使用IJSObjectReference时必须手动调用DisposeAsync()，否则会造成内存泄漏。
• 该方法适合一次性操作的场景，频繁触发的事件建议用方案1或2。

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