在 C# XAML 应用程序中显示 PowerBI 磁贴

Question

我正在 this link 查看有关在 Web 应用程序中显示 PowerBI 磁贴的教程。我想在 C# XAML 应用程序中做类似的事情。

我能够检索有关仪表板和磁贴（包括 embedUrl）的所有信息，并且我将 embedUrl 作为源传递到我的 XAML 应用程序中的 WebView 元素，但我没有查看 WebView 中显示的任何内容。

我知道我遗漏了一些东西 - "Step 2 – Submit authentication token" 中提到的部分 - 访问令牌在 JavaScript 函数 postActionLoadTile 中传回的地方。

更具体地说，link 上的示例有一些 HTML/JS 代码，如下所示用于网络应用程序：

iframe.src = embedTileUrl + "&width=" + width + "&height=" + height;

和

iframe.onload = postActionLoadTile;

// post the auth token to the iFrame. 
function postActionLoadTile() {
    // get the access token.
    accessToken = document.getElementById('MainContent_accessTokenTextbox').value;

    // return if accessToken is empty
    if ("" === accessToken)
        return;

    var h = height;
    var w = width; 

    // construct the push message structure
    var m = { action: "loadTile", accessToken: accessToken, height: h, width: w};
    message = JSON.stringify(m);

    // push the message.
    iframe = document.getElementById('iFrameEmbedTile');
    iframe.contentWindow.postMessage(message, "*");;
}

我正在尝试使用以下代码在 XAML 中做类似的事情：

XAML:

<WebView x:Name="myWebView" FrameDOMContentLoaded="myWebView_FrameDOMContentLoaded"/>

C#:

var str = string.Format(@"<iframe width='{0}' height='{1}' src='{2}'></iframe>", 
            myWebView.ActualWidth - 10,
            myWebView.ActualHeight - 10, 
            struri);

        myWebView.NavigateToString(str);

但我不知道如何超越。我确实在 C# 代码中复制了 JavaScript 代码中发生的所有事情。

如有任何帮助，我们将不胜感激

Answer 1

听起来您已经弄清楚如何获取 OAuth 令牌并为磁贴获取嵌入 URL。

我通过在 WebView 内容中包含一些 JS 脚本并使用 WebView.InvokeScriptAsync 方法调用脚本来完成关于如何执行此操作的基本概念证明。

以下是我的解决方案的要点：https://gist.github.com/itsananderson/14a179174ea65e246ce7

这里是一个简短的总结：

private void SetEmbedUrl(string embedUrl)
{
    myWebView.NavigateToString("<iframe id=\"iFrameEmbedTile\" src =\""
        + embedUrl +
        "\" style=\"width: 400px; height: 405px\"></iframe>" +
        "<script src=\"ms-appx-web:///postActionLoadTile.js\"></script>");
}

private void myWebView_FrameDOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    await myWebView.InvokeScriptAsync("postActionLoadTile", new[] { myTextBox.Text, "400", "400" });
}

这引用了以下 postActionLoadTile.js 文件，您应该将其添加到您的项目中。

function postActionLoadTile(accessToken, h, w) {
  // Generate a message for the iframe
  var m = { action: "loadTile", accessToken: accessToken, height: h, width: w };
  var message = JSON.stringify(m);

  // Push the message to the iframe
  var iframe = document.getElementById('iFrameEmbedTile');
  iframe.contentWindow.postMessage(message, "*");
}

在 C# XAML 应用程序中显示 PowerBI 磁贴

Displaying a PowerBI tile in a C# XAML app

c#

xaml

windows-runtime

powerbi