Handle post actions

To customize the Ajax requests that the Bold Reports® ASP.NET Core Report Viewer sends to the Web API service, handle the following post action events. Report processing actions are sent in an Ajax request to exchange data with the Web API service.

  • AjaxBeforeLoad
  • AjaxSuccess
  • AjaxError

AjaxBeforeLoad

The ajaxBeforeLoad event of the ASP.NET Core Report Viewer can be triggered before an Ajax request is sent to the Report Viewer Web API service. The event lets you set additional headers and custom data in the Ajax request. The following code samples demonstrate adding a custom authorization header and passing default parameter values to the service.

How do I add a custom header to the Ajax request?

To add a custom header to the ASP.NET Core Report Viewer Ajax request, initialize the ajaxBeforeLoad event in the script and add the authorization token to the headers property.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="sales-order-detail.rdl" ajax-before-load="onAjaxRequest"></bold-report-viewer>

    <script type="text/javascript">
        function onAjaxRequest(args) {
            args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });
        }
    </script>

This tutorial uses the sales-order-detail.rdl report, which you can download from the sales order detail sample report download.

Get the custom header value from the HttpContext header collection using the key name specified on the client side.

        private Microsoft.Extensions.Primitives.StringValues authenticationHeader;

        [HttpPost]
        public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)
        {
            //jsonArray = jsonResult;

            if (jsonResult != null)
            {
                //Get client side custom ajax header and store in local variable
                HttpContext.Request.Headers.TryGetValue("Authorization", out authenticationHeader);

                //Perform your custom validation here
                if (authenticationHeader == "")
                {
                    return new Exception("Authentication failed!!!");
                }
                else
                {
                    return ReportHelper.ProcessReport(jsonResult, this, _cache);
                }
            }

            return ReportHelper.ProcessReport(jsonResult, this, this._cache);
        }

Perform your own action to validate the header values.

How do I pass custom data in the Ajax request?

To pass custom data to the server in the ASP.NET Core Report Viewer Ajax request, use the data property. In the following code sample, parameter values are passed to the server side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="sales-order-detail.rdl" ajax-before-load="onAjaxRequest"></bold-report-viewer>

    <script type="text/javascript">
        function onAjaxRequest(args) {
            //Passing custom data to server
            var customerID = "CI0021";
            args.data = customerID;
        }
    </script>

The custom data values are stored in the customData header key, and you can store them in the local property. The following code sample demonstrates how to change the data source connection strings based on the Customer ID in the OnInitReportOptions method.

        string customerID = null;

        [HttpPost]
        public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)
        {
            if (jsonResult != null)
            {
                if (jsonResult.ContainsKey("customData"))
                {
                    //Get client side custom data and store in local variable.
                    customerID = jsonResult["customData"].ToString();
                }
            }

            return ReportHelper.ProcessReport(jsonResult, this, this._cache);
        }

        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            if (customerID != null)
            {
                if(customerID.Contains("CI0021"))
                {
                    //If you are changing the connection string based on customer id then could you please change the connection string as below.
                    //reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<Datasource name>", "<connection string>"));
                    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "Data Source=<instancename>;Initial Catalog=<database>;"));
                }
                else if(customerID.Contains("CI0022"))
                {
                    //If you are changing the connection string based on customer id then could you please change the connection string as below.
                    //reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<Datasource name>", "<connection string>"));
                    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "Data Source=<instancename>;Initial Catalog=<database>;"));
                }
            }
        }

AjaxSuccess

To perform a custom action or show a user-defined message after a successful Ajax request, use the ajaxSuccess event of the ASP.NET Core Report Viewer.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="sales-order-detail.rdl" ajax-before-load="onAjaxRequest" ajax-success="onAjaxSuccess"></bold-report-viewer>

    <script type="text/javascript">
        function onAjaxRequest(args) {
            args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });

            //Passing custom parameter data to server
            args.data = [{ name: 'SalesOrderNumber', labels: ['SO50756'], values: ['SO50756'] }];
        }

        function onAjaxSuccess(args) {
            //Perform your custom success message here
            alert("Ajax request success!!!");
        }
    </script>

AjaxError

The ajaxError event of the ASP.NET Core Report Viewer is called if an error occurs with the request. You can display customized error details in the event method.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="sales-order-detail.rdl" ajax-before-load="onAjaxRequest" ajax-error="onAjaxFailure"></bold-report-viewer>

    <script type="text/javascript">
        function onAjaxRequest(args) {
            args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });

            //Passing custom parameter data to server
            args.data = [{ name: 'SalesOrderNumber', labels: ['SO50756'], values: ['SO50756'] }];
        }
        function onAjaxFailure(args) {
            alert("Status: " + args.status + "\n" +
                "Error: " + args.responseText);
        }
    </script>

You can never have both an error and a success callback with a request.

How do I change the default Web API action to a custom endpoint?

To change the default Web API actions of the ASP.NET Core Report Viewer, use the actionName event argument. The argument changes the methods of IReportController to custom Web API action endpoints.

How do I change the report processing endpoint?

To change the report processing endpoint of the ASP.NET Core Report Viewer, create a new Web API action method in the Report Viewer API controller, as in the following code snippet:

        [HttpPost]
        public object PostReportCustomAction([FromBody] Dictionary<string, object> jsonArray)
        {
           return ReportHelper.ProcessReport(jsonArray, this, this._cache);
        }

The custom method must have the Dictionary<TKey, TValue> argument and add code ReportHelper.ProcessReport for processing the report.

Register the event ajaxBeforeLoad in your HTML page and set the newly created name to the actionName property, as in the following code snippet:

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="sales-order-detail.rdl" ajax-before-load="onAjaxRequest"></bold-report-viewer>

    <script type="text/javascript">
        function onAjaxRequest(args) {
            args.actionName = "PostReportCustomAction";
        }
    </script>

How do I change the export action endpoint?

To change the export action endpoint of the ASP.NET Core Report Viewer, create a new Web API action method in the Report Viewer API controller, as in the following code snippet:

       [HttpPost]
        public object ExportReportCustomAction()
        {
            return ReportHelper.ProcessReport(null, this, _cache);
        }

The custom method must have the code ReportHelper.ProcessReport for exporting the report.

Register the event onExportProgressChanged in your HTML page and set the newly created name to the actionName property, as in the following code snippet:

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="sales-order-detail.rdl" export-progress-changed="onExportProgressChanged"></bold-report-viewer>

    <script type="text/javascript">
        function  onExportProgressChanged(args) {
            if(args.stage === "exportStarted"){
              args.actionName = "ExportReportCustomAction";
            }
        }
    </script>