从 ASP.NET Core Blazor 中的 .NET 方法调用 JavaScript 函数

Posted 2023-04-12

【中文标题】从 ASP.NET Core Blazor 中的 .NET 方法调用 JavaScript 函数

【英文标题】：Call JavaScript functions from .NET methods in ASP.NET Core Blazor

【发布时间】：2021-10-01 23:29:00

【问题描述】：

我想从我的 ASP.NET Core Blazor 应用程序调用的 javascript 函数：

export function onClick(map) 
    var latLng = null;
    function onMapClick(e) 
        latLng = map.unproject(e.point).toString();
        alert("You clicked the map at " + latLng); // Here is "You clicked the map at + actual value of latLng"
    
    map.on('click', onMapClick);
    alert("You clicked the map at 123 " + latLng); // And then "You clicked the map at + null" instead of latLng variable
    return String(yourGlobalVariable);

我正在调用该函数的 C# 代码：

        string res = await mapModule.InvokeAsync<string>("onClick", mapInstance);

其中 mapInstance 和 mapModule 是 IJSObjectReference

问题是：为什么在第一个警报中我得到一个实际值，我已经分配给函数 onMapClick 中的 latLng 变量，然后我在函数外部得到 null，尽管该变量是全局的？

我在这里尝试过类似的代码：http://jsfiddle.net/mufjkv6r/1/，它可以工作

【问题讨论】：

js模块是怎么设置的？我知道现在在 Blazor 中应该可以实现，但看起来并不简单。

@HenkHolteman, mapModule = await JS.InvokeAsync("import", "./mapComponent.js"); - 像这样微不足道它来自示例：docs.microsoft.com/ru-ru/aspnet/core/blazor/…

【参考方案1】：

问题是：为什么在第一个警报中我得到一个实际值 我已经分配给函数 onMapClick 中的 latLng 变量和 那么尽管变量是全局的，但我在函数之外得到了 null？

我要说的第一件事是Jsfiddle包含正常的执行流程，即一行接一行地执行。

 var latLng = null;
    function onMapClick(e) 
        latLng = map.unproject(e.point).toString();
        alert("You clicked the map at " + latLng); // Here is "You clicked the map at + actual value of latLng"
    
    map.on('click', onMapClick);
    alert("You clicked the map at 123 " + latLng); // And then "You clicked the map at + null" instead of latLng variable
    return String(yourGlobalVariable);

但是上面的代码不会调用onMapClick函数，除非你点击了地图。所以latLng 在那个时间点将是null。

【讨论】：

没错，所以点击地图后问题就开始了，我有两个警报，第一个带有值，第二个带有 null

如果您真的需要第二次警报，那么您可以在计时器内尝试（不推荐）。 var checkExist = setInterval(function () if (latLng) alert("you clicked the map at " + latLng); clearInterval(checkExist); , 100);

我没有，我需要这个函数返回一个不为空的值

我认为更好的解决方案是从您的 onMapClick js 函数调用 c# 方法，而不是从 js 返回 `latLng`。因为，latLng 是异步设置的。

为什么更好？我从 Microsoft 文档中举了一个例子，mapModule 没有问题地返回一个对象