Asp.net core 如何将tableau嵌入asp.net核心blazor？_Asp.net Core_Tableau Api_Blazor_Blazor Server Side

Asp.net core 如何将tableau嵌入asp.net核心blazor？

asp.net-core tableau-api blazor

Asp.net core 如何将tableau嵌入asp.net核心blazor？,asp.net-core,tableau-api,blazor,blazor-server-side,Asp.net Core,Tableau Api,Blazor,Blazor Server Side,我正在尝试将tableau对象嵌入blazor应用程序中的razor页面，但它不工作。它显示空白页面，并且不会在浏览器控制台中记录任何错误下面是剃须刀页面 Tableau.razor @page”/tableau 表例 @代码{ } \u host.cshtml @page/“ @命名空间BlazoraApplication.Pages @addTagHelper*，Microsoft.AspNetCore.Mvc.TagHelpers 叶片复制 @（等待Html.RenderCompone

我正在尝试将tableau对象嵌入blazor应用程序中的razor页面，但它不工作。它显示空白页面，并且不会在浏览器控制台中记录任何错误

下面是剃须刀页面

Tableau.razor

@page”/tableau
表例
@代码{
}

\u host.cshtml

@page/“
@命名空间BlazoraApplication.Pages
@addTagHelper*，Microsoft.AspNetCore.Mvc.TagHelpers
叶片复制
@（等待Html.RenderComponentAsync（RenderMode.ServerPrerendered））

我做错了什么

谢谢

我无法复制您的确切样本，因为您数据的URL显然是私有的，但我创建了一个使用

根据您的示例，我使用了服务器端Blazor，并且能够加载示例。我认为您的代码中缺少的是没有启动Tableau库？在Tableau示例中，它们调用设置函数：

<body onload="initViz();">

我还通过传递

ElementReference

而不是

id

更改了示例-如果将来要构建组件，这是一个很好的做法，因为您不需要命名元素，并且可以在一个页面上有多个实例

然后我修改了

Index.razor

页面，以调用

OnAfterRenderAsync

中的

initViz

函数

关于如何调用js，您可以参考：@Rena我已经阅读了文档，但是我不明白，因为我们没有手动调用javascript函数。我假设您看到页面，并且呈现了

div

和

对象

标记？您是否使用devtools检查网络列表中的404或500错误？@Quango控制台或网络列表中没有错误。我知道了。非常感谢。

window.initViz = function (containerDiv, url) {
    // containerDiv: element to update - use @ref in Blazor to get this
    console.log("initViz called for " + url);

    var options = {
        hideTabs: true,
        onFirstInteractive: function () {
            console.log("Run this code when the viz has finished loading.");
        }
    };
    console.log("initViz calling .Viz()");
    var viz = new tableau.Viz(containerDiv, url, options);
}