Power BI 工作区集合入门示例

通过 Power BI 工作区集合,可以将 Power BI 报表集成到 Web 或移动应用程序。 本文介绍 Power BI 工作区集合入门示例。

往下继续之前,要保存以下资源:在将 Power BI 报表集成到示例应用以及自己的应用时,它们会有所帮助。

Note

需要先在 Azure 订阅中创建至少一个工作区集合才能配置和运行 Power BI 工作区集合入门示例。 若要了解如何在 Azure 门户中创建工作区集合,请参阅 Power BI 工作区集合入门

配置示例应用

下面引导完成 Visual Studio 开发环境的设置,以便访问运行示例应用时所需的组件。

  1. 下载并解压缩 GitHub 上的 Power BI 工作区集合 - 将报表集成到 Web 应用中示例。

    Important

    本示例中的某些 URL 只能在全球环境中使用。 若要在 Azure 中国区环境中使用它,必须执行一些替换。 例如:在文件 \ProvisionSample\App.config 中将 https://api.powerbi.com 替换为 https://api.powerbi.cn,将 https://management.azure.com 替换为 https://management.chinacloudapi.cn,在文件 \ProvisionSample\Program.cs 中将 https://management.core.windows.net 替换为 https://management.core.chinacloudapi.cn,在文件 \ProvisionSample\ProgramExtensions.cs 中将 https://login.windows.net 替换为 https://login.chinacloudapi.cn。 有关全球环境与中国区环境中 URL 的差别的详细信息,请参阅 此文

  2. 在 Visual Studio 中打开“PowerBI embedded.sln” 。 可能需要在 NuGet 程序包管理器控制台中执行 Update-Package 命令来更新此解决方案中使用的程序包。

  3. 生成解决方案。
  4. 运行“ProvisionSample” 控制台应用。 在示例控制台应用中,预配一个工作区并导入 PBIX 文件。
  5. 要预配新的工作区,请选择选项 1“收集管理”,并选择选项 6“预配新的工作区”
  6. 要导入新的“报表”,请选择选项 2“报表管理”,然后选择选项 3“将 PBIX 桌面文件导入到工作区”。

  7. 输入工作区集合名称和访问密钥。 可以通过 Azure 门户获取这些信息。 若要详细了解如何获取访问密钥,请参阅“Power BI Embedded 入门”中的查看 Power BI API 访问密钥

    Azure 门户中的访问密钥

  8. 复制并保存新创建的 工作区 ID 以便在本文后面部分使用。 创建工作区 ID 之后,可以在 Azure 门户中找到该数据。

    Azure 门户中的工作区 ID

  9. 要将 PBIX 文件导入到工作区,请选择选项 6“将 PBIX 文件导入到现有工作区”。 如果没有现有的 PBIX 文件,则可以下载 Retail Analysis Sample PBIX(零售分析示例 PBIX)。
  10. 如果出现提示,请为数据集输入一个易记的名称。

应该会看到如下所示的响应:

Checking import state... Publishing
Checking import state... Succeeded

Note

如果 PBIX 文件包含任何直接查询连接,请选择选项 7 以更新连接字符串。

此时, 工作区中已导入了一个 Power BI PBIX 报表。 接下来将演示如何运行 Power BI 工作区集合入门示例 Web 应用。

运行示例 Web 应用

Web 应用示例是一个示例应用程序,用于呈现工作区中导入的报表。 下面介绍了如何配置 Web 应用示例。

  1. PowerBI Embedded Visual Studio 解决方案中,右键单击“EmbedSample”Web 应用程序,并选择“设为启动项目”。
  2. web.configEmbedSample Web 应用程序中,编辑 appSettings 中的 AccessKeyWorkspaceCollection 名称,以及 WorkspaceId

    <appSettings>
        <add key="powerbi:AccessKey" value="" />
        <add key="powerbi:ApiUrl" value="https://api.powerbi.cn" />
        <add key="powerbi:WorkspaceCollection" value="" />
        <add key="powerbi:WorkspaceId" value="" />
    </appSettings>
    
  3. 运行 EmbedSample Web 应用程序。

运行 EmbedSample Web 应用程序后,左侧的导航面板应包含“报表”菜单。 要查看导入的报表,请展开“报表”,并单击任一报表。 如果已导入了零售分析示例 PBIX,则示例 Web 应用将如下所示:

示例应用程序中的示例左导航栏

单击某个报表后, EmbedSample Web 应用程序应类似于以下内容:

应用程序中的示例报表显示

探索示例代码

Power BI 工作区集合示例是一个 Web 应用示例,演示了如何将 Power BI 报表集成到应用中。 它采用模型-视图-控制器 (MVC) 设计模式来演示最佳做法。 本部分重点介绍可以在 PowerBI Embedded Web 应用解决方案中浏览的示例代码。 模型-视图-控制器 (MVC) 模式根据用户输入的三个单独的类(模型、视图和控件)对域、演示文稿和操作分开进行建模。 若要了解关于 MVC 的详细信息,请参阅 Learn About ASP.NET(了解 ASP.NET)。

Power BI 工作区集合示例代码分隔方式如下所示。 每个部分在 PowerBI embedded.sln 解决方案中都包括了文件名称,以便轻松查找示例中的代码。

Note

本节总结了演示如何编写代码的示例代码。 若要查看完整的示例,请加载 Visual Studio 中的 PowerBI embedded.sln 解决方案。

模型

该示例包含 ReportsViewModelReportViewModel

ReportsViewModel.cs:表示多个 Power BI 报表。

public class ReportsViewModel
{
    public List<Report> Reports { get; set; }
}

ReportViewModel.cs:表示一个 Power BI 报表。

public classReportViewModel
{
    public IReport Report { get; set; }

    public string AccessToken { get; set; }
}

连接字符串

连接字符串必须采用以下格式:

Data Source=tcp:MyServer.database.chinacloudapi.cn,1433;Initial Catalog=MyDatabase

使用一般的服务器和数据库属性会失败。 例如:Server=tcp:MyServer.database.chinacloudapi.cn,1433;Database=MyDatabase。

查看

视图用于管理多个 Power BI 报表或一个 Power BI 报表的显示情况。

Reports.cshtml:循环访问 Model.Reports 以创建 ActionLinkActionLink 包含以下内容:

部分 说明
标题 报表的名称。
QueryString 指向报表 ID 的链接。
<div id="reports-nav" class="panel-collapse collapse">
    <div class="panel-body">
        <ul class="nav navbar-nav">
            @foreach (var report in Model.Reports)
            {
                var reportClass = Request.QueryString["reportId"] == report.Id ? "active" : "";
                <li class="@reportClass">
                    @Html.ActionLink(report.Name, "Report", new { reportId = report.Id })
                </li>
            }
        </ul>
    </div>
</div>

Report.cshtml:为 PowerBIReportFor 设置 Model.AccessToken 和 Lambda 表达式。

@model ReportViewModel

...

<div class="side-body padding-top">
    @Html.PowerBIAccessToken(Model.AccessToken)
    @Html.PowerBIReportFor(m => m.Report, new { style = "height:85vh" })
</div>

控制器

DashboardController.cs:创建用于传递应用令牌 的 PowerBIClient。 JSON Web 令牌 (JWT) 是基于签名密钥生成的,用于获取凭据凭据用于创建 PowerBIClient 实例。 创建 PowerBIClient 实例后,可以调用 GetReports() 和 GetReportsAsync()。

CreatePowerBIClient()

    private IPowerBIClient CreatePowerBIClient()
    {
        var credentials = new TokenCredentials(accessKey, "AppKey");
        var client = new PowerBIClient(credentials)
        {
            BaseUri = new Uri(apiUrl)
        };

        return client;
    }

ActionResult Reports()

    public ActionResult Reports()
    {
        using (var client = this.CreatePowerBIClient())
        {
            var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId);

            var viewModel = new ReportsViewModel
            {
                Reports = reportsResponse.Value.ToList()
            };

            return PartialView(viewModel);
        }
    }

Task<ActionResult> Report(string reportId)

    public async Task<ActionResult> Report(string reportId)
    {
        using (var client = this.CreatePowerBIClient())
        {
            var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId);
            var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
            var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id);

            var viewModel = new ReportViewModel
            {
                Report = report,
                AccessToken = embedToken.Generate(this.accessKey)
            };

            return View(viewModel);
        }
    }

将报表集成到应用中

创建报表后,可以使用 IFrame 嵌入 Power BI 报表。 以下是来自 Power BI 工作区集合示例中的 powerbi.js 代码片段。

init: function() {
    var embedUrl = this.getEmbedUrl();
    var iframeHtml = '<igrame style="width:100%;height:100%;" src="' + embedUrl + 
        '" scrolling="no" allowfullscreen="true"></iframe>';
    this.element.innerHTML = iframeHtml;
    this.iframe = this.element.childNodes[0];
    this.iframe.addEventListener('load', this.load.bind(this), false);
}

筛选应用程序中嵌入的报表

可以使用 URL 语法筛选嵌入的报表。 要进行筛选,可以使用指定的筛选器将带运算符 eq$filter 查询字符串参数添加到 iFrame src url。 以下为筛选查询语法:

https://app.powerbi.com/reportEmbed
?reportId=d2a0ea38-...-9673-ee9655d54a4a&
$filter={tableName/fieldName}%20eq%20'{fieldValue}'

Note

{tableName/fieldName} 不能包含空格或特殊字符。 {fieldValue} 接受单个分类值。

另请参阅

常见 Power BI 工作区集合方案
在 Power BI 工作区集合中进行身份验证和授权
嵌入报表
从数据集创建新报表
Power BI Desktop
JavaScript 嵌入示例

有更多问题? 试用 Power BI 社区