How to use Embeded BoldReport Viewer in Blazor WebAssembly

[Charles]

I want to use embeded Boldreport Viewer in my WASM page.

So, I checked https://github.com/boldreports/blazor-webassembly-reporting-components/blob/master/Pages/ReportViewer.razor

and

1. I made Blazor Web API project for ReportViewer service

[Route("api/[controller]/[action]")]

[ApiController]


public class ReportViewerController : ControllerBase, IReportController

{

    private IMemoryCache _cache;


    private IWebHostEnvironment _hostingEnvironment;





    public ReportViewerController(IMemoryCache memoryCache, IWebHostEnvironment hostingEnvironment)

    {

        _cache = memoryCache;

        _hostingEnvironment = hostingEnvironment;

    }




    [ActionName("GetResource")]


    [AcceptVerbs("GET")]

    public object GetResource(ReportResource resource)


    {

        return ReportHelper.GetResource(resource, this, _cache);

    }




    [NonAction]


    public void OnInitReportOptions(ReportViewerOptions reportOption)

    {

        string basePath = _hostingEnvironment.WebRootPath;

        System.IO.FileStream inputStream = new System.IO.FileStream(basePath + @"\resources\" + reportOption.ReportModel.ReportPath + ".rdl", System.IO.FileMode.Open, System.IO.FileAccess.Read);


        MemoryStream reportStream = new MemoryStream();


        inputStream.CopyTo(reportStream);

        reportStream.Position = 0;

        inputStream.Close();

        reportOption.ReportModel.Stream = reportStream;

    }




    [NonAction]


    public void OnReportLoaded(ReportViewerOptions reportOption)

    {

    }




    [HttpPost]

    public object PostFormReportAction()

    {

        return ReportHelper.ProcessReport(null, this, _cache);

    }




    [HttpPost]


    public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)

    {

        return ReportHelper.ProcessReport(jsonArray, this, this._cache);

    }

}




2. I made Blazor WASM project
   I used follow function in the WASM page to use Boldreport Viewer

        // Used to render the Bold Report Viewer component in Blazor page.

        public async void RenderReportViewer()

        {

            viewerOptions.ReportName = "sales-order-detail.rdl";

            viewerOptions.ServiceURL = "https://localhost:5001/api/ReportViewer";

            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);

        }

        protected override void OnAfterRender(bool firstRender)

        {

            RenderReportViewer();

        }

*. when i run it, I got follow error.

{"messages":[],"source":"Sea.Api.Infrastructure.Auth.Jwt.ConfigureJwtBearerOptions+<>c","exception":"Authentication Failed.","errorId":"73301da9-30b9-4a48-8cc5-55705780b119","supportMessage":"Provide the ErrorId 73301da9-30b9-4a48-8cc5-55705780b119 to the support team for further analysis.","statusCode":401}

-> I added Cors related code in the Program.cs of Web API project

    builder.Services.AddCors(options =>

    {

        options.AddPolicy("AllowAllOrigins", builder =>

        {

            builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();

        });

    });

-> Bust, still have error. Is this correct approach and code ?

[Sarasilmiya Shahul Hameed]

Hi Charles,

We already have a ticket under your account for this Query. Please follow the ticket for further updates.

Regards,

Sara