This example uses the standalone DevExpress Report Parameters Panel in an ASP.NET Core-powered application.
The application includes two pages: one with the standalone Report Options Panel and the other with the DevExpress Document Viewer. Both pages load the same sample report.
The report is a list of invoices from the Northwind database. It includes parameters created with our Visual Studio Report Designer – parameters that are used to filter report data.
Parameter Panel layout is created in code in the report class constructor using the ParameterPanelFluentBuilder class .
A model for the standalone Report Parameters Panel component is created in the ParametersPanel controller action on the server. The model contains a report instance with necessary layout information (which is subsequently retrieved by the standalone Report Parameters Panel). Parameters Panel layout information is stored in the XtraReport.ParameterPanelLayoutItems collection.
Client-side JavaScript code adds an Export button to the standalone Report Parameters Panel component. When the user clicks the button, a request to the ExportReport controller action is executed, and the resulting PDF file is sent to the client.
Files to Review
Documentation
- Standalone Report Parameters Panel
- Standalone Report Parameters Panel in ASP.NET Core Applications
- How to Use Parameter Values from the Standalone Report Parameters Panel (ASP.NET Core App)
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
C#using DevExpress.XtraReports.Parameters;
using DevExpress.XtraReports.UI;
namespace DXWebApplication1.PredefinedReports {
public partial class ParametersPanelReport : DevExpress.XtraReports.UI.XtraReport {
public ParametersPanelReport() {
InitializeComponent();
CustomizeParametersPanel(this);
}
private void CustomizeParametersPanel(XtraReport report) {
ParameterPanelFluentBuilder.Begin(report)
.ClearItems()
.AddGroupItem(g0 => g0
.WithTitle("Select dates")
.WithBorderVisible(true)
.AddParameterItem(report.Parameters["pOrderDates"], p0 => p0
.WithLabelOrientation(Orientation.Vertical)
)
)
.AddGroupItem(g1 => g1
.WithTitle("Select a customer")
.WithOrientation(Orientation.Horizontal)
.WithShowExpandButton(true)
.AddParameterItem(report.Parameters["pCustomer"], p1 => p1
.WithLabelOrientation(Orientation.Vertical))
.AddSeparatorItem()
.AddGroupItem(g2 => g2
.WithTitle("Customer order details")
.AddParameterItem(report.Parameters["pCountry"])
)
)
.End();
}
}
}
C#using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.XtraReports.Web.Extensions;
using DevExpress.XtraReports.Web.ParametersPanel;
using DevExpress.XtraReports.Web.WebDocumentViewer;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;
namespace DXWebApplication1.Controllers {
public class HomeController : Controller {
public IActionResult Index() {
return View();
}
public IActionResult Error() {
Models.ErrorModel model = new Models.ErrorModel();
return View(model);
}
public IActionResult DocumentViewer(
[FromServices] IWebDocumentViewerClientSideModelGenerator viewerModelGenerator,
[FromQuery] string reportName) {
reportName = string.IsNullOrEmpty(reportName) ? "ParametersPanelReport" : reportName;
var viewerModel = viewerModelGenerator.GetModel(reportName, CustomWebDocumentViewerController.DefaultUri);
return View(viewerModel);
}
public async Task<IActionResult> ExportReport(
[FromServices] IReportParametersSerializer reportParametersSerializer,
[FromForm] string serializedParameters,
[FromForm] string reportUrl) {
var report = await reportParametersSerializer.ApplyParametersStateAsync(reportUrl, serializedParameters);
using var stream = new MemoryStream();
report.ExportToPdf(stream);
return File(stream.ToArray(), "application/pdf");
}
public IActionResult ParametersPanel(
[FromQuery] string reportName,
[FromServices] IReportParametersPanelClientSideModelGenerator clientSideModelGenerator) {
var reportNameToOpen = reportName ?? "ParametersPanelReport";
ReportParametersPanelModel parametersPanelModel = clientSideModelGenerator.GetModel(reportNameToOpen, WebDocumentViewerController.DefaultUri);
return View("ParametersPanel", parametersPanelModel);
}
}
}
Razor@model DevExpress.XtraReports.Web.ParametersPanel.ReportParametersPanelModel
@{
var viewerRender = Html.DevExpress().ReportParametersPanel("DocumentViewer")
.Height("100%")
.Width("600px")
.ClientSideEvents((configure) => {
configure.BeforeRender("BeforeRender");
}).Bind(Model);
@viewerRender.RenderHtml()
}
@section Scripts {
<script>
async function ExportReport(serializedParameters) {
const formData = new FormData();
const currentReportUrl = "@Model.ReportInfo.ReportUrl";
formData.append('serializedParameters', serializedParameters);
formData.append('reportUrl', currentReportUrl);
try {
const response = await fetch("ExportReport", {
method: 'POST',
body: formData
});
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
document.body.appendChild(link);
link.href = url;
link.download = `${currentReportUrl}.pdf`;
link.click();
link.remove();
setTimeout(() => URL.revokeObjectURL(url));
} catch (e) {
DevExpress.ui.notify({ message: 'Export failed', type: 'error' });
console.error(`Export failed - ${e.message}`);
}
}
function BeforeRender(sender, event) {
const panel = sender.GetParametersModel();
window.parametersModel = panel;
panel.buttons.push({
text: 'Export',
onClick: async () => {
const data = sender.SerializeParametersState();
await ExportReport(data);
}
});
panel.showButtons = true;
}
</script>
<link href="~/css/dx-reporting-skeleton-screen.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/viewer.part.bundle.css" />
<link rel="stylesheet" href="~/css/dx.light.bundle.css" />
<script src="~/js/reporting.thirdparty.bundle.js"></script>
<script src="~/js/viewer.part.bundle.js"></script>
@viewerRender.RenderScripts()
}