Use Parameter Values from the Standalone Report Parameters Panel (Blazor Wasm Hosted App)
- 3 minutes to read
The Standalone Report Parameters Panel allows users to specify values for report parameters. To access parameter values, use a JavaScript function handler for a component callback.
In a callback function, parameter values are accessed using the SerializeParametersState client method, that returns a string of serialized parameters. You can pass the parameter data to a controller action and call the IReportParametersSerializer.ApplyParametersStateAsync method to apply parameters to a report instance.
In this example, a Send button is added to the Standalone Report Parameters Panel. When a user clicks this button, parameter values are sent to the server for processing by the controller action. The ExportWithParameters action uses the IReportParametersSerializer.ApplyParametersStateAsync method to apply parameter values to a 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 in the following help topic: Add a Standalone Report Parameters Panel to a DevExpress Blazor WebAssembly Hosted Application.
Add the BeforeRender Event Handler Function
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.
To insert JavaScript code into a Razor page, create a JavaScript file (reporting_PanelCustomization.js) with the below-mentioned content in the wwwroot/js folder of the solution’s Client project:
window.ReportingPanel = {
beforeRender: function (sender, e) {
const panel = sender.GetParametersModel();
panel.buttons.push({
onClick: () => {
const data = sender.SerializeParametersState();
$.ajax({
url: "ExportWithParameters",
method: 'POST',
data: { serializedParameters: data, reportUrl: "TestReport" }
}).then(result => {
alert(result.message);
});
},
text: 'Send'
});
panel.showButtons = true;
}
}
Insert JavaScript code into the index.html file. As this code requires the jQuery library, make sure to also include it on the page. To do this, copy the jquery.min.js file to the wwwroot/js folder. Finally, add the following lines to the index.html file:
<body>
...
<script src="~/js/jquery.min.js"></script>
<script src="~/js/reporting_PanelCustomization.js"></script>
</body>
Specify the BeforeRender Callback
Specify the DxReportParametersPanelCallbacks nested option for the Standalone Report Parameters Panel component as follows:
@page "/panel/"
@using DevExpress.Blazor.Reporting
<DxWasmReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px">
<DxWasmReportParametersPanelRequestOptions InvokeAction="DXXRDV"/>
<DxReportParametersPanelCallbacks BeforeRender="ReportingPanel.beforeRender"/>
</DxWasmReportParametersPanel>
Implement the Controller Action
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.
using DevExpress.XtraReports.Web.ParametersPanel;
using Microsoft.AspNetCore.Mvc;
public class ExportController : Controller {
public IActionResult Index() {
return View();
}
[Route("ExportWithParameters")]
public async Task<IActionResult> ExportWithParameters(
[FromServices] IReportParametersSerializer reportParametersSerializer,
[FromServices] IWebHostEnvironment env,
[FromForm] string serializedParameters,
[FromForm] string reportUrl) {
var report = await reportParametersSerializer.ApplyParametersStateAsync(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.