Power Bi：在單個HTML頁面中呈現報表

Question

我使用HTML的以下代碼（呈現部分）方法在我的網頁上呈現多個Power Bi報表。

調試後，我發現代碼工作正常，結果存儲了不同的ID，嵌入了相應報告的URL和URL。 但是在網頁上加載後，我得到一個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> 

最終的網頁看起來是這樣的：

Answer 1

你正面臨這個問題因爲您正在使用全球@Html.PowerBIAccessToken(Model.AccessToken) HTML助手。

這對於單個報表來說很好，但是在封面之下，所有這些都寫出了一個全局JavaScript變量，每次都會被覆蓋，因此上面列出的報表正在獲勝。在處理多個報告時，您需要將訪問令牌作爲屬性傳遞給您嵌入的每個報告。

你需要做不同的兩件事情：

1. 創建嵌入令牌各報告
2. 傳遞生成的令牌到每個報告嵌入一個自定義屬性

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

ASP.NET MVC HTML助手使用co下的JavaScript SDK VERS。你可以找到更多關於JavaScript SDK @Power BI JavaScript SDK on GitHub的信息。