ActiveReports 18 .NET Edition
Developers / Create Applications / Blazor WebDesigner Application / Configure Preview
In This Topic
    Configure Preview
    In This Topic

     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.