在 JS 函数中更新 Blazor 组件 Div答案

【问题标题】：Update Blazor Component Div in JS function在 JS 函数中更新 Blazor 组件 Div
【发布时间】：2021-07-26 04:18:19
【问题描述】：

我是 Blazor 和 JS 的新手。我正在使用 VS2022 预览版。

我创建了一个 Blazor 组件，它使用 OpenLayers 来显示地图。用户可以输入 X 和 Y，然后单击按钮以显示地图。第一次一切正常，但每次单击按钮后都会向 div 添加一个额外的新地图（即 3 次单击等于 3 个地图）。我希望该函数用新地图替换 div 中的现有地图。我最好的情况是获取现有地图（如果存在）并更新视图 - 但现在只需替换现有地图即可。

这是西装革履：

@page "/map"
@inject IJSRuntime JS

... 用于输入、按钮等的 html。

@code {
    private MapJsInterop js;

    [Parameter]
    public string Title { get; set; } = "My Map";
    [Parameter]
    public double X { get; set; }
    [Parameter]
    public double Y { get; set; }

    protected override void OnInitialized()
    {
        js = new(JS);
    }

    private void DisplayMap()
    {
        js.DisplayMap(X, Y);
    }

    public void Dispose() => js?.DisposeAsync();
}

这是 DisplayMap c# 方法：

    public async void DisplayMap(double x, double y)
    {
        var module = await moduleTask.Value;
        await module.InvokeVoidAsync("displayMap", x, y);
    }

这里是创建地图的 JS 函数：

export function displayMap(x, y) {
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([x, y]),
            zoom: 16
        })
    });
}

【问题讨论】：

public async void 永远不要这样做。您正在创建一个任务，然后将其丢弃。始终使用public async Task
那些DisplayMap 方法是从哪里调用的？ js.DisplayMap 是 async void 一个吗？在这种情况下，all 应该返回 Task 并等待。只有从 HTML 调用的事件处理程序不需要等待。缺少 HTML，所以我们无法猜测还缺少什么
无论如何，有什么问题？问题包含不完整的代码和一些明显的问题，但实际问题是什么？
@enet 问题在于答案，而不是 Henk Holterman。您链接到的 question 没有什么意义。答案是......不，您不需要使用所有代码来从 Blazor 调用 Javascript 方法。只是一个带有方法名称和参数的JS.InvokeAsync作为对象。你绝对不需要这么多代码来显示地图
@Panagiotis Kanavos，你的意思是我在我的代码 sn-p 中说明的内容可以简化为“只是一个 JS.InvokeAsync，方法名称和参数作为对象。”如果您可以接受我的代码并对其进行改进，以反映您的主张，我将不胜感激，并高度尊重您。毕竟你是开发者，我不是。

标签： blazor

【解决方案1】：

我终于能够让它工作了。我将 displayMap 函数更改为使用“窗口”。用于存储地图的变量：

export function displayMap(x, y) {
    if (window.divMap == null) {
        window.divMap = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ]
        });
    }

    window.divMap.setView(
        new ol.View({
            center: ol.proj.fromLonLat([x, y]),
            zoom: 16
        })
    );
}

现在，当用户单击按钮时，要么创建新地图，要么使用新视图更新现有地图。我不知道这是否是这样做的好方法，但它确实有效。如果您认为有更好的方法，请随时发布示例。谢谢。

【讨论】：