如何将画面嵌入 asp.net core blazor？答案

【问题标题】：How to embed tableau into asp.net core blazor?如何将画面嵌入 asp.net core blazor？
【发布时间】：2019-10-23 09:02:10
【问题描述】：

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

下面是剃须刀页面。

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>

我做错了什么？

谢谢

【问题讨论】：

js的调用方法可以参考：docs.microsoft.com/en-us/aspnet/core/blazor/…
@Rena 我已经阅读了文档，但由于我们没有手动调用 javascript 函数，所以我不太明白。
我假设你看到了页面并且div和object标签被渲染了？您是否使用 devtools 检查网络列表中的任何 404 或 500 错误？
@Quango 控制台或网络列表中没有错误。

标签： asp.net-core tableau-api blazor blazor-server-side

【解决方案1】：

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

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

<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 页面以调用OnAfterRenderAsync 中的initViz 函数。

【讨论】：

我知道了。非常感谢。