Power Bi : Rendering Report in a single HTML page

Question

I am using the following code ( Render Partial) method of HTML to render multiple Power Bi Reports on my webpage.

After debugging I have found out that the code is working fine with result storing different IDs , Embed URLs and URLs of the respective reports. But after loading on webpage , I get a Power Bi loading Symbol after which all the tiles show the Last report in them. The tiles aren't showing different reports although the 's are getting different reports.

Here is the code (The code is working fine with storing all the different reports), But when the Power Bi engine loads on the webpage , I get only the last report in all the tiles:

Controller:

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 (incase needed for debugging)

 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 file :

<!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>

The final webpage looks like this :

Answer 1

You are facing this issue since you are using the global @Html.PowerBIAccessToken(Model.AccessToken) HTML helper.

This works fine for a single report, but under the covers all this does is write out a global JavaScript variable which is getting overridden each time therefore the last report listed is winning. When dealing with multiple reports you need to pass the access token in as a attribute to each report you are embedding.

You'll need to do a couple things different:

1. Create an embed token for each report
2. Pass the generated token into each report embed as a custom attribute

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

The ASP.NET MVC HTML Helpers consume the JavaScript SDK under the covers. You can find out more about the JavaScript SDK @ Power BI JavaScript SDK on GitHub.