使用JSInterop将对象传递给JavaScript会导致空对象

n3ipq98p  于 2023-06-20  发布在  Java
关注(0)|答案(2)|浏览(157)

在ASP.NetCore中,我试图用C#代码构建GoogleMaps的基本绑定。使用JSInterop,我可以成功地将字符串传递给JavaScript函数,但当我试图传递更复杂的对象时,该对象在JavaScript函数中显示为空。
我已经部分遵循了this tutorial,并修改了它以使用GoogleMap而不是BingMap。
在教程中,我发现了用于Google Maps的TypeScript definitions来帮助编写绑定代码。
我有下面的razor文件,当用户单击按钮时,它应该加载一个Map:

@page "/sitemapper"
@inherits SiteMapperBase

<h3>Map</h3>

<div id="map" style="position: relative; width: 100%; height: 70vh;"></div>

<button class="btn btn-primary" @onclick="@OpenMap">Click me</button>

@code {
void OpenMap()
{
    LoadMap();
}
}

相应的.razor.cs文件具有以下LoadMap方法:

protected async Task LoadMap()
        {
            LatLng center = new LatLng(40.417268, -3.696050);
            MapOptions options = new MapOptions("map", center, 8);
            await JSRuntime.InvokeAsync<Task>("loadMap", options);
        }

上面代码中的C#类定义如下:

public class MapOptions
    {
        public string elementId;
        public LatLng center;
        public int zoom;

        public MapOptions(string elementId, LatLng center, int zoom)
        {
            this.elementId = elementId;
            this.center = center;
            this.zoom = zoom;
        }
    }

    public class LatLng
    {
        public double lat;
        public double lng;

        public LatLng(double latitude, double longitude)
        {
            lat = latitude;
            lng = longitude;
        }
    }

在JavaScript/TypeScript方面,我定义了以下接口,它们与C#类匹配:

interface GoogleMapOptionsInterface {
    center: GoogleMapLatLngInterface,
    zoom: number,
    elementId: string
}

interface GoogleMapLatLngInterface {
    lat: number,
    lng: number
}

最后,我有一个GoogleTsInterop.ts文件,里面有我的TypeScript代码:

/// <reference path="types/index.d.ts" />
/// <reference path="interfaces/GoogleMapsInterfaces.ts" />

let googleMap: GoogleMap;

class GoogleMap {
    map: google.maps.Map;

    constructor(options: GoogleMapOptionsInterface) {
        console.log("constructor");
        var mapElement = document.getElementById(options.elementId);
        this.map = new google.maps.Map(mapElement, {
            center: options.center,
            zoom: options.zoom
        });
    }
}

function loadMap(options: GoogleMapOptionsInterface) {
    new GoogleMap(options);
}

当我尝试运行这个函数时,map没有加载,在浏览器调试器中查看,显示loadMap(...)函数中的options对象是一个空对象(参见screenshot)(对不起,我没有足够的信誉直接放入图像)。
如果我修改代码,我可以成功地传递一个字符串,如下所示:await JSRuntime.InvokeAsync<Task>("loadMap", "test");。但是我想传递对象。
有办法做到这一点吗?我做错了什么?谢谢

eqqqjvef

eqqqjvef1#

你能把它作为JsonResult或JSON字符串传递吗?

MapOptions options = new MapOptions("map", center, 8);
JSRuntime.InvokeAsync<Task>("loadMap", Json(options));

MapOptions options = new MapOptions("map", center, 8);
var result = new JavaScriptSerializer().Serialize(options);
JSRuntime.InvokeAsync<Task>("loadMap", result);
kcrjzv8t

kcrjzv8t2#

这段代码有两个问题。第一步:向经纬度添加getter和setter

public double latitude { get; set; }        
public double longitude { get; set; }

第二:typescript函数是一个void,所以需要调用一个void

await JSRuntime.InvokeVoidAsync("yourFunction", yourObject);

相关问题