Question

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

下面是剃须刀页面。

Tableau.razor

    @page "/tableau"

    <h3>Tableau Example</h3>

    <body>
        <div class='tableauPlaceholder' style='width: 1700px; height: 950px;'>
        <object class='tableauViz' width='1700' height='950' style='display:none;'>
            <param name='host_url' value='https%3A%2F%2Ftableau.xxxxxx.com%2F' /> 
            <param name='embed_code_version' value='3' /> 
            <param name='site_root' value='&#47;t&#47;ITRD' />
            <param name='name' value='AgileDEStrainingStatus&#47;Agilemind-setTrainings' />
            <param name='tabs' value='yes' /><param name='toolbar' value='yes' />
            <param name='showAppBanner' value='false' />
            <param name='filter' value='iframeSizedToWindow=true' /></object></div>
    </body>


    @code {

    }

_host.cshtml

    @page "/"
    @namespace BlazorApplication.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>BlazorApplication</title>
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link href="css/site.css" rel="stylesheet" />
    </head>
    <body>
        <app>
            @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
        </app>

        <script src="_framework/blazor.server.js"></script>
        <script type='text/javascript' src='https://tableau.xxxxxx.com/javascripts/api/viz_v1.js'></script>

    </body>
    </html>

我做错了什么？

谢谢

Answer 1

由于您的数据的网址显然是私有的，因此我无法复制您的确切示例，但是我在https://github.com/conficient/TableauSample创建了一个Tableau示例，该示例使用了basic example from the Tableau website

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

<body onload="initViz();">

您无法在Blazor中执行此操作，因为不允许使用嵌入式JS，但是您可以使用JavaScript interop

我创建了一个基本的interop file来做到这一点：

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

我还通过传递ElementReference而不是id来更改示例-如果将来要构建组件，这是个好习惯，因为您无需命名元素并且在一个页面上可以有多个实例。

然后我修改了Index.razor页面，以调用initViz中的OnAfterRenderAsync函数。

Demo

如何将Tableau嵌入到ASP.NET Core Blazor中？

1 个答案: