Add a Standalone Parameters Panel to a Blazor Web App (Interactive Server)

• Feb 09, 2026
• 4 minutes to read

This tutorial adds the Standalone Report Parameters Panel control (DxReportParametersPanel) to a Blazor Web App (Interactive Server) template.

Create a New Project

This section describes how to create a new Blazor project. If you want to start this tutorial using an existing application, go to Step 2.

1. Click Create a new project on Visual Studio’s start page and select the Blazor Web App template. Select Server from the Interactive Render Mode drop-down list.

2. Specify the project name and location, and click Next.

3. Specify additional options and click Create.

For additional information on available Blazor templates, refer to the following topic: Tooling for ASP.NET Core Blazor.

Install NuGet Packages

Install NuGet packages for Blazor Reporting:

1. Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

2. In the invoked dialog, open the Browse tab, and install the following NuGet packages:

3. Build the project.

Refer to the following topic for more information: Install NuGet Packages in Visual Studio, VS Code, and Rider.

Register DevExpress Resources

1. Add the following code to Program.cs:

2. Register DevExpress.Blazor and DevExpress.Blazor.Reporting namespaces in the _Imports.razor file:

3. In the App.razor file, call the RegisterScripts(Action<ResourcesConfigurator>) method to register DevExpress client resources:

Add a Sample Report

The Standalone Parameters Panel works with REPX files.

1. Create a new report with several parameters.

2. Create a Reports folder in the project.

3. Save the created report as a TestReport.repx file (XML format) in the created Reports folder.

Add a Report Resolution Service

You need to register a report resolution service that translates report identifiers to report instances in your application. To do this, follow the steps below:

1. Implement the IReportProvider interface in the CustomReportProvider.cs file as follows:

2. Register the created service at application startup:

Configure Data Connections

If the report uses data from a database, add a connection string to the appsettings.json file and reference the libraries to interact with the database.

For example, if a sample report retrieves data from the nwind.db SQLite database (a database file from DevExpress demos), do the following:

1. Install the System.Data.SQLite.Core NuGet package.
2. Copy the nwind.db file to the Data folder and specify that the file should be copied to the output directory.
3. Add the connection string to the appsettings.json file:

Add a Page with the Parameters Panel

Create a new Razor page (Panel.razor) in the Client/Pages folder. Use the code below to generate a page with a Standalone Report Parameters Panel component.

Enable interactivity for DevExpress components:

• Make sure the required interactive services are registered.

• Add an appropriate render mode attribute to the component’s page.

• Panel.razor

@page "/panel/"
@rendermode InteractiveServer

<DxReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px" >
</DxReportParametersPanel>

Add Navigation Links

Add navigation links to the NavMenu.razor page:

• NavMenu.razor

<div class="nav-item px-3">
    <NavLink class="nav-link" href="panel">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Standalone Parameters Panel
    </NavLink>
</div>

Run the Project

The Panel page contains the Standalone Report Parameters Panel control that displays parameters from the TestReport report:

Next Steps

Use Parameter Values from the Standalone Report Parameters PanelApply parameter values obtained from the Standalone Parameters Panel to the report.