Blazor Server Application

In This Topic

This topic describes how to add the Blazor Designer component to your Blazor Server Application.

Open Microsoft Visual Studio 2022.
Create a new project and select the Blazor Server App Empty template.
Type a name for your project and click Next.
Select a target framework and uncheck 'Configure for HTTPS' option, and then click Create.
Add the following NuGet packages:
MESCIUS.ActiveReports.Aspnetcore.Designer
MESCIUS.ActiveReports.Blazor.Designer
Add a new folder called Resources to the project.
Add a report to the Resources folder.
Make sure to set the Build Action property of the report to Embedded Resource.

Update Program.cs with the code as demonstrated in the example below.

Program.cs	Copy Code
using GrapeCity.ActiveReports.Aspnetcore.Designer; var resourcesRootDirectory = new DirectoryInfo(".\\resources\\"); var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); builder.Services .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.UseReportDesigner(config => config.UseFileStore(resourcesRootDirectory, false)); app.UseStaticFiles(); app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); app.Run();

Program.cs

Copy Code

using GrapeCity.ActiveReports.Aspnetcore.Designer;
var resourcesRootDirectory = new DirectoryInfo(".\\resources\\");
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services
     .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.UseReportDesigner(config => config.UseFileStore(resourcesRootDirectory, false));
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();

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

	Copy Code
@page "/" @using GrapeCity.ActiveReports.Blazor.Designer; @inject IJSRuntime JSRuntime <div style="height:100vh;width:100%" <ReportDesigner @ref="_designer" Document="@_document" /> </div> @code { private ReportDesigner _designer; private Document _document = new Document() { Id = "report.rdlx", Type = SupportedDocumentType.cpl }; }

Copy Code

@page "/"
@using GrapeCity.ActiveReports.Blazor.Designer;
@inject IJSRuntime JSRuntime
<div style="height:100vh;width:100%"
    <ReportDesigner @ref="_designer" Document="@_document" />
</div>
@code {
    private ReportDesigner _designer;
    private Document _document = new Document()
      {
            Id = "report.rdlx",
            Type = SupportedDocumentType.cpl
      };
}

Build and run the solution.