Blazor Web Assembly

This topic describes how to add the Blazor Designer component to your Blazor Web Assembly Application.

When you create a Blazor web assembly application, it consists of the following components:

• Report Service

• Client application that communicates with the Report Service

Prerequisites

Before following the steps of this tutorial, please ensure that you have met the following requirements:

• ActiveReports.NET Installation: ActiveReports.NET should be installed on your machine. If you have not yet installed ActiveReports.NET, please refer to our installation guide for detailed instructions.

• Visual Studio: A version of Visual Studio 2019 or later with the ASP.NET and web development workload installed.

• Basic Knowledge of C# and Visual Studio: Familiarity with C# programming and navigating Visual Studio is assumed. If you need a refresher, the Microsoft C# Guide and Visual Studio Documentation are excellent resources.

This tutorial is based on Visual Studio 2022, but the steps are similar in other versions.

1. Select the Create a new project option from the Visual Studio startup window.

2. In the list of project templates, find and select Blazor WebAssembly App Empty. Click the Next button to continue.

3. In the Configure your new project dialog, provide a name for your project in the Project name field, choose a suitable location for your project files, and click Next.

4. The Additional Information dialog will ask you to select a target framework. For the best compatibility with ActiveReports.NET, select .NET 6.0 or newer. Please ensure that the Authentication is set to None and the Configure for HTTPS is unchecked.

5. Click the Create button to finalize the project setup. Visual Studio will generate a new Blazor Server WebAssembly application project

Installing ActiveReports Nuget Packages

To use the ActiveReports.NET Blazor Report Designer, you must add the ActiveReports.NET NuGet packages to your project by following these steps.

1. In the Solution Explorer, right-click your project and select Manage NuGet Packages for Solution.

2. Go to the Browse tab and search for MESCIUS.ActiveReports.Blazor.Designer.

3. Click the package in the search results and then click Install on the right-hand side of the window.

Configuring the Report Designer middleware

The Blazor Report Designer communicates with the server-side via the ASP.NET middleware that you can configure as follows.

1. In the Solution Explorer, right-click the project, select Add > New Folder and set the name of this folder to Reports.

2. Open the Program.cs file, located in the root folder of the application.

3. Insert the following statements at the beginning of the file:

using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Web.Designer;

4. Insert the following code before the app.UseStaticFiles(); line:

var reportsDir = new DirectoryInfo(Path.Combine(app.Environment.ContentRootPath, "Reports"));
app.UseReportDesigner(config =>
{
    config.UseFileStore(reportsDir, null, FileStoreOptions.NestedFoldersLookup);
});

Initializing the report designer

1. From the Solution Explorer, open the MainLayout.razor file and replace the code with the following.

   
   

   @page "/"
   @using GrapeCity.ActiveReports.Blazor.Designer;
   @inject IJSRuntime JSRuntime
   <div style="height:100vh;width:100%"
       <ReportDesigner @ref="_designer" Server="@_server" Document="@_document" />
   </div>
   @code {
       private ReportDesigner _designer;
       private Server _server = new Server()
       {
           Url = "http://localhost:5098"
       };
       private Document _document = new Document()
           {
               Id = "Report.rdlx",
               Type = SupportedDocumentType.cpl
           };
   }

2. Run the Report Server.

Running the Project

1. To build your project, go to the Build menu in Visual Studio and select Build Solution.

2. Once the build is successful, go to the Debug menu and click Start Debugging or Start Without Debugging.