如何将JavaScript函数中获取的数组传递给调用它的Blazor组件

你可以根据你的JS逻辑是同步还是异步获取ARCGIS数据，选择以下两种方案实现： #

方案1：JS同步返回数组（适合初始化就能立刻拿到数据的场景） #

• 修改Blazor调用逻辑，使用泛型InvokeAsync<T>直接接收JS函数的返回值：

// 先定义和ARCGIS返回features结构匹配的C#类，示例：
public class GisFeature
{
    // 对应JS里features对象的属性名，大小写要匹配
    public string Id { get; set; }
    public object Geometry { get; set; }
    // 其余属性按需补充
}
// 组件内定义接收数组的属性
public GisFeature[]? GisDataArray { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 直接接收JS返回的数组，不确定结构也可以先用object[]/JsonElement[]替代GisFeature[]
        GisDataArray = await JS.InvokeAsync<GisFeature[]>("initializeJs");
        StateHasChanged();
    }
}

• 修改JS函数，直接返回获取到的数组：

function initializeJs(){ 
    var dataArray = results.features;
    return dataArray;
}

方案2：DotNet回调传值（适合ARCGIS异步请求获取数据的场景，更常用） #

如果你的ARCGIS服务请求是异步的，initializeJs无法立刻返回结果，就用回调方式实现：

• 第一步：在Blazor组件内定义JS可调用的接收方法，标注[JSInvokable]特性：

public class GisFeature
{
    // 同上，和JS对象属性名匹配
    public string Id { get; set; }
    public object Geometry { get; set; }
}
public GisFeature[]? GisDataArray { get; set; }
[JSInvokable]
public void ReceiveGisData(GisFeature[] dataArray)
{
    GisDataArray = dataArray;
    StateHasChanged();
}
// 如果组件支持销毁，建议定义引用变量后续释放，避免内存泄漏
private DotNetObjectReference<YourComponentName>? _dotNetRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _dotNetRef = DotNetObjectReference.Create(this);
        // 把当前组件的引用传给JS
        await JS.InvokeVoidAsync("initializeJs", _dotNetRef);
    }
}
// 释放引用
public async ValueTask DisposeAsync()
{
    if (_dotNetRef != null)
    {
        await _dotNetRef.DisposeAsync();
    }
}

• 第二步：修改JS逻辑，拿到数组后回调Blazor的接收方法：

function initializeJs(dotNetRef){ 
    // 这里是你获取ARCGIS结果的逻辑，比如请求回调内
    var dataArray = results.features;
    // 调用Blazor组件的ReceiveGisData方法传值
    dotNetRef.invokeMethodAsync('ReceiveGisData', dataArray);
}

注意事项 #

• C#实体类的属性名要和JS中features对象的属性名完全匹配，才能正确序列化，不确定结构的情况下可以先使用JsonElement[]接收原始数据再做解析。
• 非必要情况下不要长期持有DotNetObjectReference，组件销毁时必须释放避免内存泄漏。

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