xtrareports-404909-web-reporting-blazor-reporting-standalone-parameters-panel-get-started-blazor-wasm-hosted.md
This tutorial adds a Standalone Report Parameters Panel (DxWasmReportParametersPanel) to the application created with the Blazor Web App (Interactive WebAssembly) template.
This section describes how to create a new Blazor project. If you wish to start this tutorial using an existing application, go to Step 2.
Click Create a new project on Visual Studio’s start page and select the Blazor Web App template. Select WebAssembly from the Interactive Render Mode drop-down list.
Specify the project name and location, and click Next.
Specify additional options and click Create.
You can use this tutorial to integrate the Standalone Report Parameters Panel into a Blazor WebAssembly Hosted (available in ASP.NET Core 7.0 or earlier) template.
For additional information on available Blazor templates, refer to the following help topic: Tooling for ASP.NET Core Blazor.
Install the following NuGet packages to the projects:
Build the project.
In the Program.cs file of the main project, add the following code:
In the App.razor file, call the RegisterScripts(Action<ResourcesConfigurator>) method to register DevExpress client resources:
Create a Controllers folder.
In the created folder, add a new ReportingControllers.cs class file with the following content:
In the App.razor file, call the RegisterScripts(Action<ResourcesConfigurator>) method to register DevExpress client resources:
The Standalone Parameters Panel works with REPX files.
Create a new report with several parameters.
Create a Reports folder in the project.
Save the created report as a TestReport.repx file (XML format) in the created Reports folder.
You need to register a report resolution service that translates report identifiers to report instances in your applications. To do this, follow the steps below:
Implement the IReportProvider interface in the CustomReportProvider.cs file as follows:
Register the created service at application startup:
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:
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 a component’s page.
@page "/panel/"
@rendermode InteractiveWebAssembly
@using DevExpress.Blazor.Reporting
<DxWasmReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px">
<DxWasmReportParametersPanelRequestOptions InvokeAction="DXXRDV"></DxWasmReportParametersPanelRequestOptions>
</DxWasmReportParametersPanel>
Add navigation links to the NavMenu.razor page:
<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>
The Panel page contains the Standalone Report Parameters Panel control that displays parameters from the TestReport report:
Use Parameter Values from the Standalone Report Parameters PanelApply parameter values obtained from the Standalone Parameters Panel to the report.