Embedding Beautiful Reporting into Your Blazor Applications

It's easy to display powerful reports in your Blazor apps using Telerik Report Server and Report Viewer. Learn how in this quick tutorial.

The architecture of theTelerik Reportingsolution makes it easy to add reports either to your client-side or server-side Blazor application. Since the Telerik Report Viewer retrieves reports by issuing Ajax calls to a Report Server, it really doesn’t matter to your Blazor client whether you’re running in client-side or server-side Blazor (though you do need Blazor 3.1 or later).

Some technical background (feel free to skip the next two paragraphs): To set up this project, I first installed Report Server from my Telerik account. I then created my project using version 2.12.0 of the Telerik controls, Visual Studio 2019 preview (version 16.6.0 Preview 6.0), and ASP.NET Core 16.6.934/Razor Language Tools 16.1.0/WebAssembly 3.2.0 . I created two applications using Telerik C# Blazor Application template: one with the Blank Client App template and one with the Blank Server App template. I also downloaded the  AdventureWorks database to use with my report.

Setting up the Report Server

Before using Report Viewer in a component, you’ll have to set up a project to act as a Report Server (that can take as much as five minutes). For this post, I’m going to assume that the project displaying reports is also the Report Server project (that way I don’t have to configure the projects for cross origin request issues).

If you’re working with server-side Blazor, you have only one project in your solution, so you’ll make all of your changes to that one project. However, if you’re working with client-side Blazor (current official name: Blazor WebAssembly), you’ll have three projects in your solution. For client-side Blazor, therefore, you’ll want to make sure that you make the Report Server changes (the changes in this section) to the project with your server-side controllers (the project whose name ends with “.Server”).

You’ll need a report to display, of course. I created my own report using the Telerik Report Designer R2 2020, running against the AdventureWorks2017 database. While creating the report, I took advantage of the opportunity to embed the connection string for my report in the report itself. I saved my report in a file called ContactList.trdp. Once you have a report, you need to add it to your server-side project: Create a folder in your server project called “Reports” and copy your report into it (in my case, that’s my ContractList.trdp file).

To start configuring your server-side project to act as a Report Server, add to your server project the NuGet package Telerik.Reporting.Services.AspNetCore from the Telerik NuGet site at https://nuget.telerik.com/nuget . You’ll also need to add the NuGet Microsoft.AspNet.Core.Mvc.NewtonsoftJson package, this time from NuGet.org .

With those packages added, you need to make some changes to your server-side project’s Startup class. In the ConfigureServices method, find the services.AddRazorPages line and change it to this:

services.AddRazorPages().AddNewtonsoftJson();

Still in the ConfigureServices method, add this for a minimal Report Server implementation:

services.TryAddSingleton<IReportServiceConfiguration>(sp => new ReportServiceConfiguration
            {
                Storage = new FileStorage(),
                ReportSourceResolver = new UriReportSourceResolver(
                        System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "Reports"))
            });

The next server-side change is to create the actual Report Server controller class. Just add a new class to your server project called ReportsController, and put this in it:

[Route("api/reports")]
public class ReportsController : ReportsControllerBase
{
   public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
            : base(reportServiceConfiguration)
        {
        }        
}

For a client-side Blazor project (if you used the same template as I did to create your project and embedded the connection string to your data source in your report, also as I did), that’s all of the changes required in your server code. If you’re working on a server-side Blazor project, you’ll also need to add this line to the ConfigureServices method in your Startup class:

services.AddControllers();

From here on, adding more reports to your Report Server just consists of dropping the report into your server project’s Reports folder.

In the Telerik documentation there is acomplete reference to setting up a Report Server that gives you more options, including how to store your report’s connection string in your project’s appsettings.json file.

Using the Report Viewer

With your report server set up, you start configuring your client-side pages to display reports with ReportViewer. If you’re working with client-side Blazor, you’ll need to switch to the project with your Razor pages (the project whose name ends with “.Client”). If you’re working with server-side Blazor, then you’ll continue to work in the same project.

Once you’re sure you’re working with the right project, your first step is to add another NuGet page to it: Telerik.ReportViewer.Blazor (also from https://nuget.telerik.com/nuget ).

Now you need to add the JavaScript and CSS support ReportViewer needs to your Blazor application’s host page. If you’re working in client-side Blazor, then you’ll add these to the index.html file in the wwwroot folder; if you’re working in server-side Blazor, then it’s the _Host.cshtml file in the Pages folder that you want. A minimal set of tags, added to the page’s element, would look like this (again, the Telerik documentation has acomplete reference):

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="/api/reports/resources/js/telerikReportViewer"></script>
   <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
   <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />
</head>

If you’ve already added the jQuery script element to this page, you’ll need to delete it (the jQuery script element has to precede the telerikReportViewer script element).

In the same file, just before the closing tag, add this element:

<script src="_content/telerik.reportviewer.blazor/interop.js" defer></script>
</body>

Displaying the Report

You’re now ready to add the ReportViewer component to whatever Blazor pages in your project will be displaying reports. I just changed one page: The Index.razor page that’s included in the project template. A minimal implementation looks like the following—just make sure that you change the name of the report to the name of your report file. Since my report was in a file named ContactList.trdp, that’s what I put in:

<style>
    #rv1 {
        position: relative;
        width: 1200px;
        height: 600px;
    }
</style>

<ReportViewer 
ViewerId="rv1"
              ServiceUrl="/api/reports"
              ReportSource="@(new ReportSourceOptions()
                              {
                                  Report = "ContactList.trdp"
                              })"
              ScaleMode="@ScaleMode.FitWidth" />

You’ll also need this directive at the top of your Razor file:

@using Telerik.ReportViewer.Blazor

You should now be able to press (orin a server-side Blazor project) to see your report.

Exploiting ReportViewer

Once you’ve got your report on the screen you can start exploiting the power of ReportViewer. Without doing anything more, your user will be able to use ReportViewer’s menu to page through the report, download it in a variety of formats (PDF, CSV, RTF, TIFF), and print it. With some additional configuration, you can support users sending the report as email or providing parameters to filter the report.

By default, users can scroll through the report continuously (new pages are displayed as the user scrolls to the bottom of a page). If you want users to always page through the report, you can add the Page attribute to your ReportView component and set it to PageMode.SinglePage, like this:

ViewerId="rv1"
    PageMode="@PageMode.SinglePage"

Your user can also zoom in and out on your report using the magnifying glass icons on ReportViewer’s menu bar. However, you can control the initial display’s zoom level with the ReportViewer’s ScaleMode attribute. Setting ScaleMode to SaleMode.FitPage will compact an entire page of the report into a single browser window, for example. Alternatively, you can set ScaleMode to ScaleMode.Specific and add the Scale attribute to specify the zoom level on the report’s initial display, like this:

ScaleMode="@ScaleMode.Specific"
  Scale="1.2" 
/>

The obvious step is probably to let your users pick the report they want. That’s easy to do: First, add a dropdown list of reports to your page (tied to a change method) and assign the ReportViewer to a field in your code with an @ref attribute:

<select  @onchange="(args) => changeReport(args)">
        <option value="ContactList.trdp">Contact List</option>
        <option value="VendorsList.trdp">Vendor List</option>
    </select>

    <ReportViewer ViewerId="rv1"
                                @ref="theReport"
           …

Now, adding a field declaration and three lines of code in your change method will let your user select the report they want:

ReportViewer theReport;

void changeReport(ChangeEventArgs e)
{
   ReportSourceOptions rso = new ReportSourceOptions();
   rso.Report = e.Value.ToString();
   theReport.SetReportSourceAsync(rso);
}

You’re ready to deliver beautiful reports in your Blazor application.