Использование JSInterop для передачи объекта в JavaScript приводит к пустому объекту - PullRequest
Новая
       20

Использование JSInterop для передачи объекта в JavaScript приводит к пустому объекту

0 голосов
/ 03 июля 2019

В ASP.Net Core я пытаюсь создать базовые привязки для Карт Google из кода C #.Используя JSInterop, я могу успешно передавать строки в функции JavaScript, но когда я пытаюсь передать более сложные объекты, объект кажется пустым в функции JavaScript.

Я частично следовал этому учебнику и изменилчтобы использовать Карты Google, а не Карты Bing.

Как и в учебном пособии, я нашел определения TypeScript для Карт Google, чтобы помочь кодировать привязки.

У меня естьследующий файл бритвы, который должен загрузить карту, когда пользователь нажимает кнопку: 

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

Когда я пытаюсь запустить это, карта не загружается, и поиск в отладчике браузеров показывает мне, что options object в функции loadMap(...) - это пустой объект (см. снимок экрана ) (извините, у меня недостаточно репутации, чтобы вставить изображение напрямую).

Если я изменю свой кодЯ могу успешно передать строку со следующим: await JSRuntime.InvokeAsync<Task>("loadMap", "test");.Однако я хочу передать объект.

Есть ли способ сделать это?Что я делаю неправильно?Спасибо

1 Ответ

0 голосов
/ 03 июля 2019

Можете ли вы передать его в виде строки 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);
...