Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Add a Standalone Report Parameters Panel to a DevExpress Blazor Server Application

  • 3 minutes to read

This tutorial describes how to add the Standalone Report Parameters Panel control to a DevExpress Blazor Server application.

#Prerequisites

A DevExpress Blazor Server application. For more information about Devexpress Blazor components, review the following help topics:

#Configure the Blazor Server Project

  1. Install the following NuGet packages:

    For more information on how to install NuGet packages for DevExpress components, review the following help topic: Choose Between Offline and Online DevExpress NuGet Feeds.

  2. Open Program.cs and add the following code:

    using DevExpress.Blazor.Reporting;
    //...
    var builder = WebApplication.CreateBuilder(args);
    // ...
    // Add services to the container.
    builder.Services.AddDevExpressBlazorReporting();
    // ...
    var app = builder.Build();
    // ...
    app.UseRouting();
    // Enables controllers for interaction with the component.
    app.MapControllers();
    // ...
    

#Add Controllers

  1. Create a HomeController.cs file. Define a controller action that supplies the model for the client-side Parameters Panel component. Use the following code example:

    using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
    using DevExpress.XtraReports.Web.ParametersPanel;
    using Microsoft.AspNetCore.Mvc;
    
    public class HomeController : Controller {
    
        [Route("[controller]")]
        public IActionResult ParametersPanel(
            [FromQuery] string reportName,
            [FromServices] IReportParametersPanelClientSideModelGenerator clientSideModelGenerator) {
            var reportNameToOpen = reportName ?? "TestReport";
            ReportParametersPanelModel parametersPanelModel = clientSideModelGenerator.GetModel(reportNameToOpen, WebDocumentViewerController.DefaultUri);
            return View("Panel", parametersPanelModel);
        }
    }
    

#Add a Sample Report

  1. Create a new report with several parameters and save it as TestReport.repx file (XML format). Review the following topic for more information: Add a New Report in Visual Studio.

    Tip

    To edit a report without the Microsoft Visual Studio, you can use VS Code with the dedicated extension:

    Visual Studio Code (VS Code) Report Designer Extension (CTP)

  2. Create a Reports folder in the project. Paste the TestReport.repx file created in the previous step. Specify that the file should be copied to the output directory.

#Implement the IReportProvider Service

Create and register a report resolution service that translates report identifiers to report instances. For this purpose, implement the IReportProvider interface in the CustomReportProvider.cs class as follows:

using DevExpress.XtraReports.Services;
using DevExpress.XtraReports.UI;

public class CustomReportProvider : DevExpress.XtraReports.Services.IReportProvider {
    public XtraReport GetReport(string id, ReportProviderContext context) {
        var reportNameToOpen = id ?? "TestReport";
        string path = $"Reports\\{reportNameToOpen}.repx";
        if (!System.IO.File.Exists(path)) return new XtraReport();
        return XtraReport.FromXmlFile(path);
    }
}

Register the custom service at application startup:

using DevExpress.XtraReports.Services;
// ...
builder.Services.AddDevExpressBlazorReporting();

builder.Services.AddScoped<IReportProvider,CustomReportProvider>();

#Configure Data Connection

If the report uses data from a database, add a connection string to the appsettings.json file and reference the libraries needed to interact with the database. If a sample report retrieves data from the nwind.db SQLite database (a database file from DevExpress demos), install the System.Data.SQLite.Core NuGet package, copy the nwind.dbfile to the Data folder, specify that the file should be copied to the output directory, and add the following connection string:

"ConnectionStrings": {
    "NWindConnectionString": "XpoProvider=SQLite;Data Source=|DataDirectory|Data/nwind.db"
}

#Add a Razor Page with the Standalone Report Parameters Panel Component

Create a new Razor page with the following content as an example:

@page "/panel/"
@rendermode InteractiveServer

@using DevExpress.Blazor.Reporting

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

#Run the Application

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

Standalone Report Parameters Panel

#Next Steps

For information on how to apply parameter values obtained from the Standalone Report Parameters Panel to the report, review the following help topic: Use Parameter Values from the Standalone Report Parameters Panel (Blazor Server App).