Blazor Web Assembly

This topic describes how to add the Blazor Designer component to your Blazor Web Assembly Application. This project uses the Report Server.

1. Open Microsoft Visual Studio 2022.

2. Select the Create a new project option.

3. In the Create a new project dialog, select the ActiveReports Blazor WebAssembly App Empty template and click Next to continue.

4. In the Configure your new project dialog, in the Project name field, type a name for your project and click Create.

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

6. Go to the Browse tab and search for the MESCIUS.ActiveReports.Blazor.Designer NuGet package.

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

8. From the Solution Explorer, open Pages/Index.razor and add this code.

   @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
           };
   }

9. Run the Report Server.

10. Build and run the application.