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. Create a new project and select the Blazor WebAssembly App Empty template.

3. Type a name for your project and click Next.

4. Select a target framework and uncheck 'Configure for HTTPS' option, and then click Create.

5. Add the MESCIUS.ActiveReports.Blazor.Designer NuGet package.

6. Add the Blazor WebDesigner component to 'Pages/Index.razor'.

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

7. Run the Report Server.

8. Build and run the application.