How to Use Parameter Values from the Standalone Report Parameters Panel (ASP.NET Core App)

• Apr 15, 2024
• 3 minutes to read

The Standalone Report Parameters Panel allows the user to specify values for report parameters. The parameter values are accessed using the SerializeParametersState client method, that returns a string of serialized parameters. On the server, call the IReportParametersSerializer.ApplyParametersStateAsync method to apply the parameters to a report instance.

In this example, a Send button is added to the Standalone Report Parameters Panel. When the user clicks the button, the parameter values from the standalone parameter panel are sent to the server for processing by the controller action. The ExportWithParameters action uses the IReportParametersSerializer.ApplyParametersStateAsync method to apply parameter values to the report instance. Subsequently the ExportToPdf(String, PdfExportOptions) method exports the report to a PDF file.

Prerequisites

This help topic is based on an application created from the ASP.NET Core Web App (Model-View-Controller) project template in Microsoft Visual Studio. The Standalone Report Parameters Panel component is integrated into this application, as described in the following help topic: Standalone Report Parameters Panel in ASP.NET Core Applications.

Handle the BeforeRender Event

The BeforeRender event handler adds a Send button to the parameter panel and defines a function to handle the button’s onClick event. This function serializes the parameters and uses the jQuery ajax callback function to send the parameter information and a report identifier to the server.

The following code example is the BeforeRender event handler for the Standalone Report Parameters Panel component:

C#

function OnBeforeRender(sender, e) {
    const panel = sender.GetParametersModel();
    panel.buttons.push({
        onClick: () => {
            const data = sender.SerializeParametersState();
            $.ajax({
                url: "ExportWithParameters",
                method: 'POST',
                data: { serializedParameters: data, reportUrl: "@Model.ReportInfo.ReportUrl" }
            }).then(result => {
                alert(result.message);
            });
        },
        text: 'Send'
    });
    panel.showButtons = true;
}

The following code snippet specifies the OnBeforeRender function as the BefoRender event handler:

@{
    var panelRender = Html.DevExpress().ReportParametersPanel("ParametersPanel")
        .Height("100%")
        .Width("750px")
        .ClientSideEvents((configure) =>
        {
            configure.BeforeRender("BeforeRender");
        })
        .Bind(Model);
    @panelRender.RenderHtml()
}

Implement the Controller Action

The client’s parameter data is sent to the ExportWithParameters controller action. In this action code, call the ApplyParametersStateAsync method to apply parameters to the report.

Once the report instance has all the necessary parameter values, it is ready to generate a document. Call the ExportToPdf method to create a PDF document from the report.

HomeController.cs

using DevExpress.XtraReports.Web.ParametersPanel;
using Microsoft.AspNetCore.Mvc;
// ...
    public async Task<IActionResult> ExportWithParameters(
    [FromServices] IReportParametersSerializer reportParametersSerializer,
    [FromServices] IWebHostEnvironment env,
    [FromForm] string serializedParameters,
    [FromForm] string reportUrl) {
        var report = await reportParametersSerializer.(reportUrl,
            serializedParameters);
        report.ExportToPdf(Path.Combine(env.ContentRootPath,
            "Reports", $"{reportUrl}.pdf"));
        return Ok(new { message = "Report exported successfully" });
    }

The PDF file is saved to the Reports folder in the project.

Next Steps

You can modify the controller action to export a report to different formats and email the exported document. For more information, review the following help topic: Export Reports.

You can edit the exported document on a server using the DevExpress Office File API.

You can implement an Azure function or an AWS Lambda function to integrate DevExpress Reports in your cloud application. For more information, review the following help topics:

• DevExpress Reports - Cloud Integration
• Azure Functions App for Office File API
• Amazon Lambda Function for Office File API