Render RDLC report

To render an RDLC report in the Bold Reports^® Blazor Report Viewer, load the report from the local file system and bind a JSON array or a custom business object data collection as its data source. The following steps demonstrate how to render an RDLC report with a JSON array and a custom business object data collection.

To learn how to render an RDLC in a Blazor Web Assembly application, you can watch this video:

To learn how to render an RDLC in a Blazor Server application, you can watch this video:

Add the RDLC report Product List.rdlc from the Bold Reports^® installation location to your application wwwroot/Resources folder. For more information, see Samples and demos.

Bind data source in Web API controller

The following steps help you configure the Blazor Report Viewer Web API controller to render the RDLC report with a business object data collection.

1. Create a class and methods that return business object data collection. Use the following code in your application’s Web API Service.

   public class ProductList
   {
       public string ProductName { get; set; }
       public string OrderId { get; set; }
       public double Price { get; set; }
       public string Category { get; set; }
       public string Ingredients { get; set; }
       public string ProductImage { get; set; }
   
       public static IList GetData()
       {
           List<ProductList> datas = new List<ProductList>();
           ProductList data = null;
           data = new ProductList()
           {
               ProductName = "Baked Chicken and Cheese",
               OrderId = "323B60",
               Price = 55,
               Category = "Non-Veg",
               Ingredients = "grilled chicken, corn and olives.",
               ProductImage = ""
           };
           datas.Add(data);
           data = new ProductList()
           {
               ProductName = "Chicken Delite",
               OrderId = "323B61",
               Price = 100,
               Category = "Non-Veg",
               Ingredients = "cheese, chicken chunks, onions & pineapple chunks.",
               ProductImage = ""
           };
           datas.Add(data);
           data = new ProductList()
           {
               ProductName = "Chicken Tikka",
               OrderId = "323B62",
               Price = 64,
               Category = "Non-Veg",
               Ingredients = "onions, grilled chicken, chicken salami & tomatoes.",
               ProductImage = ""
           };
           datas.Add(data);
   
           return datas;
       }
   }

2. Set the value of the ProcessingMode property to ProcessingMode.Local in the RDLC report location.

3. To load a report as a stream, create a report stream using the FileStream class, and assign the report stream to the Stream property.

4. Bind the business object data values collection by adding a new item to the DataSources as in the following code snippet:

       [NonAction]
       public void OnInitReportOptions(ReportViewerOptions reportOption)
       {
           string basePath = _hostingEnvironment.WebRootPath;
           reportOption.ReportModel.ProcessingMode = ProcessingMode.Local;
           FileStream inputStream = new FileStream(basePath + @"\resources\" + reportOption.ReportModel.ReportPath + ".rdlc", System.IO.FileMode.Open, System.IO.FileAccess.Read);
           MemoryStream reportStream = new MemoryStream();
           inputStream.CopyTo(reportStream);
           reportStream.Position = 0;
           inputStream.Close();
           reportOption.ReportModel.Stream = reportStream;
           reportOption.ReportModel.DataSources.Add(new BoldReports.Web.ReportDataSource { Name = "list", Value = ProductList.GetData() });
       }

   The Name is case sensitive and it should be same as in the data source name in the report definition. The Value accepts IList, DataSet, and DataTable inputs.

5. Open the Pages/Index.razor page and set the report name.

    // ReportViewer options
    BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

    // Used to render the Bold Report Viewer component in Blazor page.
    public async void RenderReportViewer()
    {
        viewerOptions.ReportName = "Product List";
        viewerOptions.ServiceURL = "/api/BoldReportsAPI";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }