This topic describes how to use the Blazor Viewer inside the Blazor Designer.

1. In Microsoft Visual Studio 2022, open your Blazor Designer Application project.
2. Add the following NuGet packages for the Blazor Viewer.
       MESCIUS.ActiveReports.Aspnetcore.Viewer (for Blazor Server only)
       MESCIUS.ActiveReports.Blazor.Viewer
3. [For Blazor Server only] Update Program.cs as demonstrated in the code example below.

   Program.cs

   Copy Code

   using GrapeCity.ActiveReports.Aspnetcore.Designer; using GrapeCity.ActiveReports.Aspnetcore.Viewer; var resourcesRootDirectory = new DirectoryInfo(".\\resources\\"); var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); builder.Services .AddReportViewer() .AddReportDesigner() .AddMvc(options => options.EnableEndpointRouting = false) .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null); var app = builder.Build(); if (!app.Environment.IsDevelopment()) { // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseReportViewer(config => config.UseFileStore(resourcesRootDirectory)); app.UseReportDesigner(config => config.UseFileStore(resourcesRootDirectory, false)); app.UseStaticFiles(); app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); app.Run();

4. Update 'Pages/Index.razor' as demonstrated in the code example below.

   Pages/Index.razor

   Copy Code

   @page "/" @using GrapeCity.ActiveReports.Blazor.Designer; @using GrapeCity.ActiveReports.Blazor.Viewer @inject IJSRuntime JSRuntime <link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" /> <div style="height:100vh;width:100%"> <ReportDesigner @ref="_designer" Document="@_document" Preview="@_preview" /> </div> @code { private ReportDesigner _designer; private ReportViewer _viewer; private Document _document = new Document() { Id = "report.rdlx", Type = SupportedDocumentType.cpl }; private Preview _preview; public Index() { _preview = new Preview() { CanPreview = true, OpenViewer = OpenViewer }; } private async void OpenViewer(ViewerSettings settings) { if (_viewer != null) { await _viewer.OpenReport(settings.DocumentInfo.Id); return; } _viewer = new ReportViewer(); var initOptions = new InitializationOptions(); initOptions.ReportID = settings.DocumentInfo.Id; initOptions.PanelsLocation = PanelsLocation.toolbar; await _viewer.Render(JSRuntime, settings.Element, initOptions); } }

5. Build and run the application.