Use Parameter Values from the Standalone Report Parameters Panel (Blazor Server App)
- 3 minutes to read
The Standalone Report Parameters Panel allows the user 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 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, 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 in the following help topic: Add a Standalone Report Parameters Panel to a DevExpress Blazor Server 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:
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;
}
}
To use this technique, insert JavaScript code into the _Host.cshtml file. This code requires the use of the jQuery library. Make sure to enable this library on your page. Finally, add the following lines to the _Host.cshtml 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:
<DxReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px" >
<DxReportParametersPanelRequestOptions HandlerUri="DXXRDV"></DxReportParametersPanelRequestOptions>
<DxReportParametersPanelCallbacks BeforeRender="ReportingPanel.beforeRender"></DxReportParametersPanelCallbacks>
</DxReportParametersPanel>
Implement the Controller Action
The 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.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.XtraReports.Web.ParametersPanel;
using Microsoft.AspNetCore.Mvc;
public class HomeController : Controller {
// ...
[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.