时间戳

首页 > 解决方案 > 使用 JSInterop 将对象传递给 JavaScript 会导致空对象

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

问题描述

在 ASP.Net Core 中，我正在尝试从 C# 代码构建谷歌地图的基本绑定。使用 JSInterop 我可以成功地将字符串传递给 JavaScript 函数，但是当我尝试传递更复杂的对象时，该对象在 JavaScript 函数中显示为空。

我部分遵循了本教程并将其修改为使用 Google 地图而不是 Bing 地图。

与教程中一样，我找到了 Google Maps 的TypeScript 定义来帮助编写绑定代码。

我有以下剃须刀文件，当用户单击按钮时应该加载地图：

@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
}

最后，我有一个带有我的 TypeScript 代码的 GoogleTsInterop.ts 文件：

/// <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);
}

当我尝试运行它时，地图没有加载，并且在浏览器调试器中查看显示函数中的options对象loadMap(...)是一个空对象（见截图）（对不起，我没有足够的声誉直接将图像放入）。

如果我更改我的代码，我可以成功传递一个带有以下内容的字符串：await JSRuntime.InvokeAsync<Task>("loadMap", "test");. 但是我想传递对象。

有没有办法做到这一点？我究竟做错了什么？谢谢

标签： javascriptc#typescriptasp.net-coreblazor

解决方案

Can you pass it as a JsonResult or JSON string? 

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

or

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

推荐阅读