# Blazor Designer

This topic describes the working samples on WebDesigner wrapped in Blazor - Blazor Designer Server, Report Service, and Blazor Designer Web Assembly.

## Content



Three samples are available for the Blazor Designer demonstration.


> type=note
> **Note**: To run this sample, you must have
> 
> *   [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) (version 17.0 or later)
> *   [.NET 6.0 SDK](https://dotnet.microsoft.com/en-us/download)
> *   [.NET Core Hosting Bundle](https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-aspnetcore-6.0.0-windows-hosting-bundle-installer) (for deployment to IIS)

## BlazorDesignerServer

The sample demonstrates creating a Blazor Server Application with the ActiveReports Blazor Designer, using local report service and remote report service.

![ActiveReports Blazor Designer](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/sample_webdesigner.png)

### Sample Location

[https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner/BlazorDesignerServer](https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner/BlazorDesignerServer)

### Details

When you run the sample, the Blazor Designer opens in your browser wherein you can create, edit, or modify your reports.

The project uses the **MESCIUS.ActiveReports.Aspnetcore.Designer, MESCIUS.ActiveReports.Aspnetcore.Viewer,** **MESCIUS.ActiveReports.Blazor.Designer**, and **MESCIUS.ActiveReports.Blazor.Viewer** NuGet packages.

The project consists of the following elements.

*   wwwroot: Contains designer CSS file for the Blazor application.
*   Pages: This folder contains Razor pages and supporting files.
*   \_Imports.razor: The Razor template file to include the directives.
*   Program.cs file: Add services to container, configure HTTP request, and add CORS middleware.

## ReportService

The sample demonstrates creating a remote report server that could be be used by the ActiveReports Blazor Designer.

### Sample Location

[https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner/ReportService](https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner/ReportService)

### Details

When you run the sample, the browser displays the report service as running. The project uses the **MESCIUS.ActiveReports.Aspnetcore.Designer** and **MESCIUS.ActiveReports.Aspnetcore.Viewer** NuGet packages.

The project consists of the following elements.

*   Program.cs: Contains necessary code to add services, configure the HTTP request and CORS.
*   Controllers folder: Contains DataSets and Templates controllers.
*   Datasets folder: Contains JSON datasets - Categories, Employees, Products, and Invoice.
*   Resources folder: Contains reports, themes, images, etc. that are used by the project to illustrate WebDesigner.
*   Services folder: Consists of classes that get datasets and templates information.

## BlazorDesignerWebAssembly

The sample demonstrates how to make Blazor WebAssembly Application with the ActiveReports Blazor Designer using remote report service.

### Sample Location

[https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner/BlazorDesignerWebAssembly](https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner/BlazorDesignerWebAssembly)

### Details

You need to first build and run **ReportService** sample to start the report service if you want to use existing report templates. When you run the **BlazorDesignerWebAssembly** sample, the Blazor Designer opens in your browser and you can design a new report or open an existing one.

The project uses the **MESCIUS.ActiveReports.Blazor.Designer**, **MESCIUS.ActiveReports.Blazor.Viewer**, **Microsoft.AspNetCore.Components.WebAssembly**, and **Microsoft.AspNetCore.Components.WebAssembly.DevServer** NuGet packages.

The project consists of the following elements.

*   wwwroot: Contains index.html file for the Blazor application.
*   Pages: This folder contains Razor pages.
*   \_Imports.razor: The Razor template file to include the directives.
*   Program.cs file: Create and run web host instance.