Power BI report is not loading in MVC application

Question

Few days back i learnt making reports in power BI and it was great experience learning power BI. As i am creating a dashboard for my MVC based web application, i wanted to make look and fill of my dashboard attractive. I am thinking of embedding power BI report with that for that i have used following code inside view :-

<body>
    <script type="text/javascript" src="~/Scripts/PowerBI/powerbi.js"></script>
    <script type="text/javascript">
    window.onload = function () {
        var iframe = document.getElementById("iFrameEmbedReport");
        iframe.src = "https://app.powerbi.com/reportEmbed?reportId=" + embedReportId;
        iframe.onload = postActionLoadReport;
    }

    function postActionLoadReport() {
        var m = {
            action: "loadReport",
            accessToken: accessToken
        };
        message = JSON.stringify(m);

        iframe = document.getElementById("iFrameEmbedReport");
        iframe.contentWindow.postMessage(message, "*");;
      }
    </script>
    <style>
        #iFrameEmbedReport {
            width: 95%;
            height: 95%;
        }
    </style>
    <iframe ID="iFrameEmbedReport"></iframe>
</body>

And code for controller is given below :-

public class DashBoardController : Controller
    {
        string baseUri = WebConfigurationManager.AppSettings["PowerBiDataset"];
        string AccessToken = string.Empty;
        // GET: DashBoard
        public ActionResult DashBoard()
        {

            if (Request.Params.Get("code") != null)
            {
                Session["AccessToken"] = GetAccessToken(
                    Request.Params.GetValues("code")[0],
                    WebConfigurationManager.AppSettings["ClientID"],
                    WebConfigurationManager.AppSettings["ClientSecret"],
                    WebConfigurationManager.AppSettings["RedirectUrl"]);


                Response.Redirect("~/DashBoard/DashBoard");
            }

            if (Session["AccessToken"] != null)
            {

                AccessToken = Session["AccessToken"].ToString();
                GetReport(0);
            }
            return View();
        }


        protected void GetReport(int index)
        {
            System.Net.WebRequest request = System.Net.WebRequest.Create(
                String.Format("{0}/Reports",
                baseUri)) as System.Net.HttpWebRequest;

            request.Method = "GET";
            request.ContentLength = 0;
            request.Headers.Add("Authorization", String.Format("Bearer {0}", AccessToken));

            using (var response = request.GetResponse() as System.Net.HttpWebResponse)
            {

                using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
                {

                    PBIReports Reports = JsonConvert.DeserializeObject<PBIReports>(reader.ReadToEnd());

                    if (Reports.value.Length > 0)
                    {
                        var report = Reports.value[index];
                        ViewData["AccessToken"] = Session["AccessToken"].ToString();
                        ViewData["EmbedURL"] = report.embedUrl;
                        ViewData["ReportID"] = report.id;
                    }
                }
            }
        }

        public void GetAuthorizationCode()
        {

            var @params = new NameValueCollection
            {

                {"response_type", "code"},
                {"client_id", WebConfigurationManager.AppSettings["ClientID"]},
                {"resource", WebConfigurationManager.AppSettings["PowerBiAPI"]},
                { "redirect_uri", WebConfigurationManager.AppSettings["RedirectUrl"]}
            };

            var queryString = HttpUtility.ParseQueryString(string.Empty);
            queryString.Add(@params);

            Response.Redirect(String.Format(WebConfigurationManager.AppSettings["AADAuthorityUri"] + "?{0}", queryString));


        }

        public string GetAccessToken(string authorizationCode, string clientID, string clientSecret, string redirectUri)
        {
            TokenCache TC = new TokenCache();

            string authority = WebConfigurationManager.AppSettings["AADAuthorityUri"];
            AuthenticationContext AC = new AuthenticationContext(authority, TC);
            ClientCredential cc = new ClientCredential(clientID, clientSecret);

            return AC.AcquireTokenByAuthorizationCode(
                authorizationCode,
                new Uri(redirectUri), cc).AccessToken;
        }
    }
    public class PBIReports
    {
        public PBIReport[] value { get; set; }
    }
    public class PBIReport
    {
        public string id { get; set; }
        public string name { get; set; }
        public string webUrl { get; set; }
        public string embedUrl { get; set; }
    }

As i think, I am doing everything right but i don't know why it's not able to display report. Please suggest me if i did any mistake in the above given code.

Answer 1

It's not clear where the error is, as you provided lots of code and no specfics on the error itself. Here are few things to note:

To embed Power BI content in your HTML you just need an empty div element
Too much code overall.

You need to perform following steps:

Acquire authentication token by using AuthenticationContext.AcquireTokenAsync with credentials provisioned on Power BI side
Instantiate PowerBIClient with the token you just obtained. That's the token for your application. Never pass it to users. Don't store in Session as it'll expire. PowerBIClient(new Uri(_Context.ApiUrl), new TokenCredentials(authResult.AccessToken, "Bearer"))
Obtain ID(s) of content that's available in Power BI. There are different APIs for different types (dashboards, reports, tiles) as well as for content that's in Groups(workspaces) or not, eg client.Dashboards.GetDashboardsInGroupAsync(GroupId) . This step could be skipped if you already know what type of content you're getting and its ID. Keep in mind that if EmbedUrl property is empty on returned object(s) you won't be able to render, even if you manually construct such url.
Obtain Embed Token for particular content. There are different methods available, eg client.Reports.GenerateTokenInGroupAsync(GroupId, Id-of-content, new GenerateTokenRequest(accessLevel: "view"))
The final step is to apply Embed Token and EmbedUrl on the client-side. Something among following lines:

.

var embedToken = $('#embedToken').val();
var txtEmbedUrl = $('#txtReportEmbed').val();
var txtEmbedReportId = $('#txtEmbedReportId').val();
var models = window['powerbi-client'].models;
var permissions = models.Permissions.All;

var config= {
    type: 'report',
    tokenType: models.TokenType.Embed,
    accessToken: embedToken,
    embedUrl: txtEmbedUrl,
    id: txtEmbedReportId,
    permissions: permissions,
    settings: {
        filterPaneEnabled: true,
        navContentPaneEnabled: true
    }
};

var embedContainer = $('#embedContainer')[0];
var report = powerbi.embed(embedContainer, config);

You should be able to test your stuff here . Just plugin your values.

You can also observe sample app here] 2 . Flow provided above is for "app owns data" case.

Power BI report is not loading in MVC application

Question

1 answers

solution1
1 ACCPTED 2017-11-30 21:30:17

Power BI report is not loading in MVC application

Question

1 answers

solution1 1 ACCPTED 2017-11-30 21:30:17

solution1
1 ACCPTED 2017-11-30 21:30:17