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

Question

我正在使用HTML的以下代码(呈现部分)方法在我的网页上呈现多个Power报告。

经过调试，我发现代码运行良好，结果存储了不同is，嵌入了相应报告的URL和URL。但是在网页上加载之后，我得到了一个Power加载符号，之后所有的瓷砖都在其中显示了最后的报告。瓷砖没有显示不同的报告，尽管它们得到了不同的报告。

下面是代码(代码可以很好地存储所有不同的报告)，但是当Power引擎在网页上加载时，我只得到所有tiles中的最后一个报告：

控制器：

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>

最后的网页如下：

​

​

Answer 1

您正面临这个问题，因为您使用的是全局@Html.PowerBIAccessToken(Model.AccessToken) helper。

对于单个报表来说，这很好，但是在幕后，所有这些都是编写一个全局JavaScript变量，每次都会被重写，因此最后列出的报告获胜了。在处理多个报表时，需要将访问令牌作为属性传递给嵌入的每个报表。

，你需要做一些不同的事情：

1. 为每个报表创建嵌入令牌
2. 将生成的令牌传递到嵌入为自定义属性的每个报表中。

@Html.PowerBIReport(Model.Report.Name,Model.Report.EmbedUrl, new { @powerbi_access_token = Model.AccessToken })

ASP.NET MVC Helpers在封面下使用JavaScript SDK。您可以找到更多关于JavaScript SDK @ 基于JavaScript的Power BI GitHub SDK的信息。