ASP.NET Core Blazor调用JS函数时变量赋值异常问题咨询

问题原因 #

• 核心是事件回调的异步执行机制：你给地图绑定的onMapClick点击回调属于异步事件处理函数，只有当用户主动触发地图点击行为时才会被执行。代码不会在map.on('click', onMapClick)绑定后阻塞等待点击事件触发，而是直接向下执行后续的alert和return逻辑，此时点击事件还未发生，latLng没有被赋值，自然保持初始的null值。
• 你测试的示例代码能正常运行，大概率是示例中主动同步触发了click事件（比如绑定后立即调用模拟点击的方法），和真实用户触发点击的异步场景逻辑完全不同。

解决方案 #

你当前的写法无法直接把点击后的坐标通过InvokeAsync的返回值拿到，因为onClick函数在点击事件发生前就已经执行完毕返回结果了，有两种常见实现方案：

方案1：使用Promise等待首次点击结果 #

修改JS代码为返回Promise，直到用户第一次点击地图后再返回结果：

export function waitForFirstClick(map) {
    return new Promise((resolve) => {
        function onMapClick(e) {
            const latLng = map.unproject(e.point).toString();
            alert("You clicked the map at " + latLng);
            map.off('click', onMapClick); // 拿到结果后解绑，避免重复触发
            resolve(latLng); // 将点击结果作为返回值
        }
        map.on('click', onMapClick);
    })
}

C#调用代码不需要修改，await会自动等待Promise执行完成拿到结果：

string latLng = await mapModule.InvokeAsync<string>("waitForFirstClick", mapInstance);

方案2：JS回调主动回传结果到C# #

如果需要持续监听多次点击事件，可以在点击回调中主动调用C#方法回传数据：

1. 先在C#中实现可供JS调用的接收方法，添加[JSInvokable]标记：

[JSInvokable]
public void ReceiveMapClick(string latLng)
{
    // 此处处理拿到的坐标数据
    Console.WriteLine($"收到地图点击坐标：{latLng}");
}

2. 修改JS点击回调逻辑，触发时调用C#方法：

export function bindMapClickEvent(map, dotNetRef) {
    function onMapClick(e) {
        const latLng = map.unproject(e.point).toString();
        alert("You clicked the map at " + latLng);
        // 调用C#的ReceiveMapClick方法回传数据
        dotNetRef.invokeMethodAsync('ReceiveMapClick', latLng);
    }
    map.on('click', onMapClick);
}

3. C#侧绑定事件时传入DotNetReference实例：

var dotNetRef = DotNetObjectReference.Create(this);
await mapModule.InvokeVoidAsync("bindMapClickEvent", mapInstance, dotNetRef);

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