ActiveReports 18 .NET Edition
Developers / Create Designer and Viewer Applications / Blazor WebDesigner Application / Blazor Web Assembly
In This Topic
    Blazor Web Assembly
    In This Topic

    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'.
      Pages/Index.razor
      Copy 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
              };
      }
      
    7. Run the Report Server.
    8. Build and run the application.