Power Bi:在单个HTML页面中呈现报告

时间:2016-06-20 06:44:21

标签: c# html webpage powerbi powerbi-embedded

我使用HTML的以下代码(Render Partial)方法在我的网页上呈现多个Power Bi Reports。

经过调试后,我发现代码工作正常,结果存储了不同的ID,嵌入了相应报告的URL和URL。 但是在网页上加载后,我得到一个Power Bi加载符号,之后所有图块都显示其中的Last报告。瓷砖没有显示不同的报告,尽管报告的报告不同。

这是代码(代码可以正常存储所有不同的报告)但是当Power Bi引擎加载到网页上时,我只得到所有图块中的最后一个报告:

控制器:

public class TelemetryController : Controller
{
    private string workspaceCollection;
    private Guid workspaceId;
    private string signingKey;
    private string apiUrl;
    public TelemetryReports telemetryreport;

    public TelemetryController()
    {
        this.workspaceCollection = ConfigurationManager.AppSettings["powerbi:WorkspaceCollection"];
        this.workspaceId = Guid.Parse(ConfigurationManager.AppSettings["powerbi:WorkspaceId"]);
        this.signingKey = ConfigurationManager.AppSettings["powerbi:SigningKey"];
        this.apiUrl = ConfigurationManager.AppSettings["powerbi:ApiUrl"];
    }
    // GET: Telemetry


    public ActionResult TelemetryIndex()
    {
        var authResponse = new SecurityHelper().Authenticate(new AuthenticateRequest() { IsNonMRT = false, isOnLoad = true });
        telemetryreport = new TelemetryReports();

        if (!authResponse.IsAuthenticated)
            throw new NotAuthorizedException((String.Format(ResourceMessages.GetErrorMessage("REW_ERR_0005"), authResponse.context.LoggedInAlias)) + ";" + ((int)PAFEventID.REW_ERR_0005).ToString());
        var devToken = PowerBIToken.CreateDevToken(this.workspaceCollection, this.workspaceId.ToString());
        using (var client = this.CreatePowerBIClient(devToken))
        {
            var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId.ToString());

            foreach (var item in reportsResponse.Value)
            {
                var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId.ToString(), Guid.Parse(item.Id).ToString());
                TelemetryReports.ReportViewModel _report = new TelemetryReports.ReportViewModel()
                {
                    Report = item,
                    AccessToken = embedToken.Generate(this.signingKey)
                };
                telemetryreport.Reports.Add(_report);
            }
        }
        return View(telemetryreport);
    }

    [ChildActionOnly]
    public ActionResult Reports()
    {
        var devToken = PowerBIToken.CreateDevToken(this.workspaceCollection, this.workspaceId.ToString());
        using (var client = this.CreatePowerBIClient(devToken))
        {
            var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId.ToString());

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

            return PartialView(viewModel);
        }
    }

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

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

            return View(viewModel);
        }
    }


    private IPowerBIClient CreatePowerBIClient(PowerBIToken token)
    {
        var jwt = token.Generate(signingKey);
        var credentials = new TokenCredentials(jwt, "AppToken");
        var client = new PowerBIClient(credentials)
        {
            BaseUri = new Uri(apiUrl)
        };

        return client;
    }
}

TelemetryReport.cs (需要调试)

 public class TelemetryReports
        {
            public TelemetryReports() {
                Reports = new List<ReportViewModel>();
            }
            public List<ReportViewModel> Reports { get; set; }

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

        public class ReportViewModel
        {
            public IReport Report { get; set; }

            public string AccessToken { get; set; }
        }
    }
    public class TelemetryReport
    {
        public IReport Report { get; set; }

        public string AccessToken { get; set; }
    }

Index.HTML 档案:

<!DOCTYPE html>
    <html lang="en">
    <head>
        @Styles.Render("~/Content/telemetry")

        @{
            Layout = null;
        }
        @model TelemetryReports
        <script type="text/javascript" src="/js/app.js"></script>
        <script src="~/Scripts/app/powerbi.js"></script>
        <script src="~/Scripts/lib/chart.js"></script>
        <script src="~/Scripts/lib/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/lib/bootstrap.min.js"></script>
    </head>
    <body>
        <section>
            <nav class="cl-effect-1" style="background-color:transparent">
                <a class="fifth before after" href="/">Home</a>
            </nav>
        </section>
        <br />

        <div class="TelemetryReport">
            @for (int i = 0; i < Model.Reports.Count; i++)
            {
                @Html.Partial("Report", Model.Reports[i])
            }
        </div>


    </body>
    </html>

Report.HTML

@using Microsoft.PowerBI.AspNet.Mvc;

@{
    Layout = "";
}
@model TelemetryReports.ReportViewModel
<body>

    <section class="color-9">
        <nav class="cl-effect-13">
            <div class="active">@Model.Report.Name</div>
        </nav>
    </section>
    @Html.PowerBIAccessToken(Model.AccessToken)
        @Html.PowerBIReport(Model.Report.Name, Model.Report.EmbedUrl, new { style = "height:35vh" })

    @*<div>
        @Html.PowerBIAccessToken(Model.AccessToken)
        @Html.PowerBIReport(Model.Report.Name,Model.Report.EmbedUrl, new { style = "height:85vh ; width:65vh;" })
    </div>*@

</body>

最终网页如下:

All the reports are same after the Power Bi engine loads

1 个答案:

答案 0 :(得分:1)

您正在使用全局@Html.PowerBIAccessToken(Model.AccessToken) HTML帮助程序,因此您遇到此问题。

这适用于单个报告,但是在所有这一过程中,所有这些都是写出一个全局JavaScript变量,每次都会被覆盖,因此列出的上一个报告就是赢了。处理多个报告时,您需要将访问令牌作为属性传递给您要嵌入的每个报告。

您需要做一些不同的事情:

  1. 为每个报告创建一个嵌入标记
  2. 将生成的令牌传递到嵌入为自定义属性的每个报告中
  3. @Html.PowerBIReport(Model.Report.Name,Model.Report.EmbedUrl, new { @powerbi_access_token = Model.AccessToken })

    ASP.NET MVC HTML Helpers使用JavaScript SDK。您可以在Power BI JavaScript SDK on GitHub找到有关JavaScript SDK的更多信息。