Connecting the Blazor Report Viewer with the Report Server for .NET
The following article will guide you on how to use the Blazor Report Viewer in a web application and connect it to the Report Server for .NET.
Prerequisites
- Visual Studio 2019+
- Existing .NET 8 and higher Blazor Server App or .NET 8 and higher hosted Blazor WebAssembly App
- An installed and running Telerik Report Server for .NET.
- Report Server for .NET's User that will connect from the viewer should have at least one enabled Token.
- Report Server for .NET should contain at least one report that can be accessed by the User account.
Adding the Blazor Report Viewer component using an item template
The Blazor Report Viewer item template allows you to quickly add the Blazor Report Viewer and embed the Blazor Report Viewer to your application.
Make sure that you select Blazor Report Viewer page, instead of HTML5 Report Viewer page when adding a new item to your project, and follow the steps in the 'Add new Report Viewer' dialog.
Refer to the Configuring the HTML5 Report Viewer to work with Report Server using Item Templates section in the How to Use HTML5 Report Viewer with Report Server documentation article, again, making sure that you select the Blazor Report Viewer page in the Add New Item dialog box.
After creating the Blazor Report Viewer, we need some manual adjustments to make it work with the Report Server for .NET as explained in the section Connect to the Report Server for .NET instance.
Adding the Blazor Report Viewer component manually
- Add NuGet package reference to the
Telerik.ReportViewer.Blazorpackage hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to the Visual Studio setting using the article How to add the Telerik private NuGet feed to Visual Studio. -
Make sure app configuration inside the
Configuremethod of theStartup.cs(orProgram.csif .NET 8+ is used) can serve static files:app.UseStaticFiles(); -
Add JavaScript dependencies to the
headelement of thePages/_Host.cshtml(Blazor Server) orwwwroot/index.html(Blazor WebAssembly), orComponents/App.razor(Blazor Web App):<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://yourReportServerUrl:port/api/reports/resources/js/telerikReportViewer"></script> -
Add a Telerik Kendo UI SASS-Based Theme to the
headelement of thePages/_Host.cshtml(Blazor Server) orwwwroot/index.html(Blazor WebAssembly), orComponents/App.razor(Blazor Web App). The Razor syntax for a server application differs and you need to escape the @ symbol as @@:<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" /> -
Add the dedicated
interop.jsdependency at the end of thebodyelement of thePages/_Host.cshtml(Blazor Server) orwwwroot/index.html(Blazor WebAssembly), orComponents/App.razor(Blazor Web App):<script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>
Connect to the Report Server for .NET instance
The Report Server for .NET provides two approaches for authenticating from the Telerik Report Viewers. We strongly recommend using the Token authentication as more secure.
Token Authentication
This is the recommended approach.
Use the following snippet to place the viewer component in a Razor page like Pages/Index.razor:
@page "/"
@* For Blazor Web Apps, an interactive render mode should be used, for example: *@
@* @rendermode InteractiveServer *@
@using Telerik.ReportViewer.Blazor
<style>
#rv1 {
position: relative;
width: 1200px;
height: 600px;
}
</style>
<ReportViewer ViewerId="rv1"
ReportServer="@(new ReportServerOptions { Url = "https://yourReportServerUrl:port", GetPersonalAccessToken="trvCallbacks.getPersonalAccessToken" })"
ReportSource="@(new ReportSourceOptions()
{
Report = "Published/Dashboard"
})"
ScaleMode="@(ScaleMode.Specific)"
Scale="1.0" />
The
serviceUrloption shouldn't be present, or the viewer would default to no authentication scheme utilizing the Report Server for .NET as a regular Reporting REST Service.
Substitute the https://yourReportServerUrl:port with the actual url of your Report Server for .NET instance, along with the port if needed.
The GetPersonalAccessToken option should be set to a function returning the Token of the User who is logging in to the Report Server for .NET wrapped in a Promise. Here is a sample implementation that relies on a dedicated secure endpoint '/rs-token' to return the token:
window.trvCallbacks = {
getPersonalAccessToken: function () {
return fetch('/rs-token')
.then(response => response.text())
}
}
Server-side, you may configure the endpoint '/rs-token', as shown below, after ensuring the environment variable "RS_NET_TOKEN" is set up correctly. We strongly recommend securing the endpoint:
app.MapGet("/rs-token", (HttpContext context) =>
{
return Environment.GetEnvironmentVariable("RS_NET_TOKEN") ?? string.Empty;
})
.RequireAuthorization();
Username and Password Authentication
Avoid this approach for security reasons.
If you prefer to use hardcoded credentials, use the following snippet to place the viewer component in a Razor page like Pages/Index.razor.
@page "/"
@* For Blazor Web Apps, an interactive render mode should be used, for example: *@
@* @rendermode InteractiveServer *@
@using Telerik.ReportViewer.Blazor
<style>
#rv1 {
position: relative;
width: 1200px;
height: 600px;
}
</style>
<ReportViewer ViewerId="rv1"
ReportServer="@(new ReportServerOptions { Url = "https://yourReportServerUrl:port", Username = "demouser", Password = "demopass" })"
ReportSource="@(new ReportSourceOptions()
{
Report = "Published/Dashboard"
})"
ScaleMode="@(ScaleMode.Specific)"
Scale="1.0" />
The Guest User may connect to the Report Server for .NET only with a Token. It doesn't have a password and cannot connect to the Report Server for .NET with Null credentials, as the Report Server for .NET Framework 4.6.2.