Skip to main content
All docs
V21.2

Create Blazor Report Viewer Application Using CLI (.NET 5.0)

  • 3 minutes to read

Prerequisites

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 net5.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 21.2.7 --source "https://nuget.devexpress.com/**************************************************/api"
    dotnet add package DevExpress.Blazor.Reporting.Viewer  --version 21.2.7 --source "https://nuget.devexpress.com/**************************************************/api"
    
  4. Register the DevExpress.Blazor stylesheet in the Pages/_Host.cshtml:

    <head>
    <!--...-->
    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.css" rel="stylesheet" />
    </head>
    
  5. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor
    
  6. Call the UseStaticWebAssets(IWebHostBuilder) method on the host builder in the Program.cs file to enable the application to load client-side resources:

    public class Program {
        // ...
        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder => {
                    webBuilder.UseStartup<Startup>();
                    webBuilder.UseStaticWebAssets();
                });
    }
    
  7. Apply the DevExpress Blazing Berry bootstrap theme to the application. For this, download the bootstrap.min.css file from the DevExpress Bootstrap Themes repository, and overwrite the file in the wwwroot\css\bootstrap folder.

  8. The DevExpress.Blazor NuGet package automatically adds the services.AddDevExpressBlazor method call to the project. This method is required. You should check whether your project calls this method at startup (Startup.DevExpress.cs file).

  9. Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the AddDevExpressNativeBlazorReporting method to add services, call the UseDevExpressServerSideBlazorReportViewer method to specify the DevExpress Blazor Reporting settings, and use the MapControllers(IEndpointRouteBuilder) method to add endpoints for controller actions:

    public class Startup
    {
        // ...
        public void ConfigureServices(IServiceCollection services) {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            // ...
            services.AddDevExpressServerSideBlazorReportViewer();
        }
    
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
            // ...
            app.UseDevExpressServerSideBlazorReportViewer();
            // ...
            app.UseEndpoints(endpoints => {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
                endpoints.MapControllers();
            })
        }
        // ...
    } 
    
  10. Explicitly implement the export controller that enables the user to print and export reports. For this, create a new Controllers folder and a new class file (ReportingControllers.cs) with the following content:

    using DevExpress.Blazor.Reporting.Controllers;
    using DevExpress.Blazor.Reporting.Internal.Services;
    
    public class DownloadExportResultController : DownloadExportResultControllerBase {
        public DownloadExportResultController(ExportResultStorage exportResultStorage) : 
            base(exportResultStorage) {
        }
    }
    
  11. Create a page with the Report Viewer component. For this, create a new file (Viewer.razor) in the Pages folder with the following content:

    @page "/Viewer"
    
    @using DevExpress.Blazor.Reporting
    
    <h3>Viewer</h3>
    <link rel="stylesheet" href="_content/DevExpress.Blazor/dx-blazor.css">
    <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.css">
    
    <DxReportViewer @ref="reportViewer">
    </DxReportViewer>
    
    @code {
        DxReportViewer reportViewer;
    }
    
  12. Add a navigation link to the Shared/NavMenu.razor page:

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="viewer">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Report Viewer
            </NavLink>
        </li>
    
  13. Type the following command in the command prompt in the application folder to run the application:

    dotnet watch run
    
  14. When the browser opens the application, navigate to the viewer page:

    App from Microsoft Blazor Template with Empty DevExpress Report Viewer

Next Steps

You can add a new report to the project, as the following help topic describes: Create a Report in Visual Studio. Assign a report class instance to the DxReportViewer.Report property to load a report in the Report Viewer.

To load existing reports, use the technique described in the following help topic: How to Load a Report and Restore the Data Connection.