Create Blazor Report Viewer Application from Microsoft Blazor Template CLI

• Mar 14, 2024
• 4 minutes to read

Tip

To create a Blazor Reporting application, use preconfigured DevExpress templates that allow you to create an application with minimal effort and maximum efficiency. For more information, review the following help topics:

• Use .NET CLI to Create a Blazor Reporting Application from Template
• Use DevExpress Project Templates to Create a Blazor Reporting Application

Prerequisites

• Install the .NET 6.0 or later SDK.

Create an App with the Report Viewer

1. Create a new Blazor server app as described in the Microsoft Blazor Tutorial. Run the following command:

   dotnet new blazorserver -o BlazorReportViewerApp --no-https --framework net6.0
   

2. Navigate to the created directory:

    cd BlazorReportViewerApp
   

3. Install the DevExpress.Blazor.Reporting.Viewer NuGet package. For this, navigate to the DevExpress NuGet Gallery, click Obtain Feed URL and copy the URL, and run the following command (replace asterisks with the actual symbols from your feed URL):

   dotnet add package DevExpress.Blazor  --version 23.2.5 --source "https://nuget.devexpress.com/**************************************************/api"
   dotnet add package DevExpress.Blazor.Reporting.Viewer  --version 23.2.5 --source "https://nuget.devexpress.com/**************************************************/api"
   

4. Register the DevExpress.Blazor namespace in the _Imports.razor file:

   _Imports.razor

   @using DevExpress.Blazor
   

5. Call the UseWebRoot and UseStaticWebAssets(IWebHostBuilder) methods in the Program.cs file to enable the application to load client-side resources:

   Program.cs

   using Microsoft.AspNetCore.Components;
   using Microsoft.AspNetCore.Components.Web;
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Add services to the container.
   builder.Services.AddRazorPages();
   builder.Services.AddServerSideBlazor();
   // ...
   builder.WebHost.UseWebRoot("wwwroot");
   builder.WebHost.UseStaticWebAssets();
   // ...
   var app = builder.Build();
   // ...
   

6. Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the Program.cs file:

   • AddDevExpressBlazor
   • AddDevExpressServerSideBlazorReportViewer
   • MapControllers

   The Program.cs file has the following content:

   Program.cs

   using Microsoft.AspNetCore.Components;
   using Microsoft.AspNetCore.Components.Web;
   // ...
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Add services to the container.
   builder.Services.AddRazorPages();
   builder.Services.AddServerSideBlazor();
   // ...
   builder.Services.AddDevExpressBlazor();
   builder.Services.AddDevExpressServerSideBlazorReportViewer();
   // If you use Bootstrap 5, specify the Bootstrap version explicitly
   builder.Services.Configure<DevExpress.Blazor.Configuration.GlobalOptions>(options => {
       options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5;
               });
   
   builder.WebHost.UseWebRoot("wwwroot");
   builder.WebHost.UseStaticWebAssets();
   
   var app = builder.Build();
   
   // Configure the HTTP request pipeline.
   if (!app.Environment.IsDevelopment())
   {
       app.UseExceptionHandler("/Error");
   }
   
   app.UseStaticFiles();
   
   app.UseRouting();
   
   app.MapBlazorHub();
   app.MapFallbackToPage("/_Host");
   app.MapControllers();
   
   app.Run();
   

7. Create a page with the Report Viewer component. To create this page, create a new file (Viewer.razor) in the Pages folder with the following content:

   Pages/Viewer.razor

   @page "/Viewer"
   
   @using DevExpress.Blazor.Reporting
   
   <h3>Viewer</h3>
   <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" />
   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css">
   
   <DxReportViewer @ref="reportViewer">
   </DxReportViewer>
   
   @code {
       DxReportViewer? reportViewer;
   }
   

8. Add a navigation link to the Shared\NavMenu.razor page:

   Shared\NavMenu.razor

       <div class="nav-item px-3">
           <NavLink class="nav-link" href="viewer">
               <span class="oi oi-list-rich" aria-hidden="true"></span> Report Viewer
           </NavLink>
       </div>
   

9. Type the following command in the command prompt in the application folder to run the application:

   dotnet watch run
   

10. When the browser opens the application, navigate to the Viewer page:

    

Load a Report

1. Create a report and save it to a .repx file, as the following help topic describes: Create a Report in Visual Studio. You can use the DevExpress End-User Report Designer instead of the Visual Studio Report Designer for any platform.

   For this example, you can use the Report Wizard to create a new report and bind it to sample Northwind database. When you are prompted for the connection string name, enter “NWindConnectionString“.

2. Copy the nwind.db database to the project’s Data folder and add the connection string entry to the appsettings.json file:

   appsettings.json

   {
       // ...
       "connectionStrings": {
           "NWindConnectionString": "XpoProvider=SQLite;Data Source=Data\\nwind.db"
       }
   }
   

3. The ProductListReport.repx report layout file in this example is obtained from the XtraReports For WinForms MainDemo - Products List demo module. You should run the demo module, switch to the Designer, and save the report to a file.

   Create the Reports folder in the wwwroot project folder and copy the ProductListReport.repx file to the Reports folder.

4. Add the code to the Viewer.razor page that loads a report from a file and assigns the report instance to the DxReportViewer.Report property. The resulting Viewer.razor file has the following content:

   Pages/Viewer.razor

   @page "/Viewer"
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI
   
   <h3>Viewer</h3>
   <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" />
   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css">
   
   <DxReportViewer @ref="reportViewer" Report="@Report"> 
   </DxReportViewer>
   
   @code {
       DxReportViewer? reportViewer { get; set; }
       XtraReport Report { get{
           return XtraReport.FromFile(Path.Combine(Directory.GetCurrentDirectory(),
            @"wwwroot\Reports\ProductListReport.repx"));
       return null;
           }
       }
   }
   

5. The application page appears as follows:

   

Next Steps

Use the technique described in the following help topic to load existing reports with greater control over data connections and report parameters: How to Load a Report and Restore the Data Connection.