C# Corner

ASP.NET Core 5 Microsoft Power BI Reporting

Eric Vogel provides step-by-step instructions to create an ASP.NET 5 Core web app in Visual Studio 2019 and embed a Power BI report in it.

Today I'm going to cover how embed a Power BI report in an ASP.NET 5 Core web app. We'll start out by creating a new web app, and then I'll detail how to embed your Power BI report in it.

We'll get started by creating a new ASP.NET Core 5 MVC Web App in Visual Studio 2019 as seen in Figure 1.

Figure 1: Create New ASP.NET Core 5 MVC Web App
[Click on image for larger view.] Figure 1: Create New ASP.NET Core 5 MVC Web App

After that give a name to the web application as seen in Figure 2.

Figure 2: Naming Your ASP.NET Core 5 App
[Click on image for larger view.] Figure 2: Naming Your ASP.NET Core 5 App

On the next dialog select .NET 5 as your target framework as seen in Figure 3.

Figure 3: Select .NET 5 Framework
[Click on image for larger view.] Figure 3: Select .NET 5 Framework

Next click the Create button and you will have a new ASP.NET 5 Core web app that has a Razor page named Index.

Now that we have our web app created, let's get our Power BI report created. In order to create a Power BI report you'll need to create a Power BI account. I'll be using a new trial account for our demo report. Note that as of now you need a work email address to sign up for a Power BI account.

You should now see the Power BI dashboard where we'll create a new report as seen in Figure 4.

Figure 4: Power BI Dashboard
[Click on image for larger view.] Figure 4: Power BI Dashboard

Click on the New report button. You should now see the screen in Figure 5 where you can pick your data set. Pick the Paste or manually enter data option.

Figure 5: Pick a Dataset for Our Report
[Click on image for larger view.] Figure 5: Pick a Dataset for Our Report

Now we'll enter some test report data in a Customers table as seen in Figure 6.

Figure 6: Creating Test Report Data
[Click on image for larger view.] Figure 6: Creating Test Report Data

Then click on the Auto create report button. Power BI will come up with some auto generated reports that aren't very useful, so we'll go to the Datasets tab and select our Customers dataset as seen in Figure 7.

Figure 7: Customers Dataset
[Click on image for larger view.] Figure 7: Customers Dataset

On the next page select the Create from scratch option that will bring you to a create a report screen. Enter the settings seen in Figure 8.

Figure 8: Creating our Report
[Click on image for larger view.] Figure 8: Creating our Report

Our test report just displays all of our data in a table with a drill through for the third State column. We'll now save our report through File->Save report and give our report a name of "Customers" as seen in Figure 9.

Figure 9: Saving Our Report
[Click on image for larger view.] Figure 9: Saving Our Report

We are now going to publish our report to the web through File->Embed report-> Publish to web as seen in Figure 10.

Figure 10: Publish Report Embed
[Click on image for larger view.] Figure 10: Publish Report Embed

Your administrator will have to enable this feature in order to successfully publish your report to the web. If this is your own Power BI account, you can also start a free 60-day trial to enable this feature. You will now see a modal with a link to your report and iframe code to embed the report in your web app. Copy the iframe code now as seen in Figure 11.

Figure 11: Power BI Embed Options
[Click on image for larger view.] Figure 11: Power BI Embed Options

Now it is time to embed our report in our ASP.NET 5 Web App. Open up the Index.cshtml file and put in this markup:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h2>Customers Report</h2>
    <iframe width="1140" height="541.25" src="https://app.powerbi.com/reportEmbed?reportId=d6c4372b-6c7b-48a5-ac4c-8bd20c9aa0f4&autoAuth=true&ctid=8519dfd5-6e3f-43b7-a4ce-f7c5afbe8ce4&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly93YWJpLXdlc3QtdXMtZC1wcmltYXJ5LXJlZGlyZWN0LmFuYWx5c2lzLndpbmRvd3MubmV0LyJ9" frameborder="0" allowFullScreen="true"></iframe>
</div>

Replace the <iframe> tag with your custom Power BI Report. You can now run your web app and interact with your report as seen in Figure 12.

Figure 12: Viewing Our Report in Our Web App
[Click on image for larger view.] Figure 12: Viewing our Report in Our Web App

About the Author

Eric Vogel is a Senior Software Developer for Red Cedar Solutions Group in Okemos, Michigan. He is the president of the Greater Lansing User Group for .NET. Eric enjoys learning about software architecture and craftsmanship, and is always looking for ways to create more robust and testable applications. Contact him at [email protected].

comments powered by Disqus

Featured

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

  • What's New for Python, Java in Visual Studio Code

    Microsoft announced March 2024 updates to its Python and Java extensions for Visual Studio Code, the open source-based, cross-platform code editor that has repeatedly been named the No. 1 tool in major development surveys.

Subscribe on YouTube