HTML5 Viewer With Custom Parameter Editors using ASP.NET Core 8 Not Displaying

[Esteban]

I was tasked at my company with implementing custom parameter editors in order to dynamically hide parameter depending on whether they should be available for use or not. I first followed this tutorial to create the custom parameter editors and the corresponding HTML5 Widget. Once I did that, I tried integrating the custom parameter edtiors into a HMTL5 Report Viewer using the ASP.NET Core 8 tutorial (links here, here, here) but after building both the REST service project and the HTML5 viewer, whenever I run the app, I simply land on a blank localhost page leading to Microsoft Tutorials on building NET Core apps. I have tried all available troubleshooting & looked at documentation but I have no idea how to move forward. I have double checked that I followed the tutorials correctly and still no progress. I am using Telerik Report Desginer R3 2020, Visual Studio 2022, .Net 8. Attached below is the code for the program.cs, appsettings.json, reportscontroller.cs, and index.html

AppSettings.json (Rest Project)

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft.AspNetCore": "Warning"
        }
    },
    "AllowedHosts": "*",
    "ConnectionStrings": {
        "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source =.\\SQLEXPRESS; Initial Catalog=AdventureWorks; Intgrated Security = true"
    }
    
}

 

namespace TopLevelStatements.Controllers
{
    using System.Net;
    using System.Net.Mail;
    using Microsoft.AspNetCore.Mvc;
    using Telerik.Reporting.Services;
    using Telerik.Reporting.Services.AspNetCore;

    [Route("api/[controller]")]
    [ApiController]
    public class ReportsController : ReportsControllerBase
    {
        public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
        : base(reportServiceConfiguration)
        {
        }

        protected override HttpStatusCode SendMailMessage(MailMessage mailMessage)
        {
            throw new System.NotImplementedException("This method should be implemented in order to send mail messages");

            // using (var smtpClient = new SmtpClient("smtp01.mycompany.com", 25))
            // {
            //     smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
            //     smtpClient.EnableSsl = false;
            //     smtpClient.Send(mailMessage);
            // }
            // return HttpStatusCode.OK;
        }
    }
}

using Microsoft.Extensions.DependencyInjection.Extensions;
using Telerik.Reporting.Services;
using Telerik.Reporting.Cache.File;


var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddControllers().AddNewtonsoftJson();

// Configure dependencies for ReportsController.
builder.Services.TryAddSingleton<IReportServiceConfiguration>(sp =>
    new ReportServiceConfiguration
    {
        // The default ReportingEngineConfiguration will be initialized from appsettings.json or appsettings.{EnvironmentName}.json:
        ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
        // In case the ReportingEngineConfiguration needs to be loaded from a specific configuration file, use the approach below:
        //ReportingEngineConfiguration = ResolveSpecificReportingConfiguration(sp.GetService<IWebHostEnvironment>()),
        HostAppId = "ReportingNet6",
        Storage = new FileStorage(),
        ReportSourceResolver = new UriReportSourceResolver(System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "Reports"))
    });

builder.Services.AddCors(corsOption => corsOption.AddPolicy(
    "ReportingRestPolicy",
    corsBuilder =>
    {
        corsBuilder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
    }
));


var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    //...
});

app.UseStaticFiles();

app.UseAuthorization();

app.MapRazorPages();

app.UseCors("ReportingRestPolicy");

app.Run();

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik HTML5 Report Viewer Demo in ASP.NET Core in .NET 5</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale-1, maximum-scale=1" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="https://localhost:44320/api/reports/resources/is/telerikReportViewer"></script>
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 50px;
            bottom: 5px;
            overflow: hidden;
            font-family: verdana, Arial;
    </style>
</head>
<body>
    <div id="reportViewer1">
        loading...
    </div>
    <script>
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceurl: "https://localhost:44320/api/reports/", reportSource: {
                    },
                    report: "Barcodes Report.trdp", parameters: {}
viewMode: telerikReportViewer.ViewModes.INTERACTIVE, scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, scale: 1.0,
                    enableAccessibility: false,
                    sendEmail: enabled: true }
});
});</script>
</body>
</html>

[Dimitar]

Hi Esteban,

Thank you for the shared code and the additional information!

It seems that you have implemented the Reporting REST Service and have also added the HTML5 Report Viewer.

For instructions on how to now implement custom parameter editor for the report viewer, you may have a look at the Creating and Using Custom Parameter Editors in HTML5 ReportViewer - Telerik Reporting article which includes a code example.

I hope this will help.

Regards,
Dimitar
Progress Telerik

[Esteban]

Hello, I already have all the implementations, the issue is that when running the project in visual studio, it simply outputs a blank page as demonstrated, and not the expected report. How to fix this?

[Dimitar]

The initial page loaded by the application may not be the page with the report viewer. Even if there were issues with the initialization of the report viewer, the "Loading..." text of the DOM element used for the initialization would be displayed on the page instead but there is no such text in the attached image in the post.

If you wish the initially loaded page by the application to be the page with the report viewer, you may have a look at the c# - Set "Homepage" in Asp.Net MVC - Stack Overflow for details on how to change it.

[Esteban]

Hello, I have fixed the HTML5 viewer and now when I run the project, VS opens two pages, one of which says loading. This code you have attached in the latest response, where should it go?

 

[Dimitar]

You may find information about where the code should be pasted in the thread answers , e.g. https://stackoverflow.com/a/1142016. For any more concrete suggestions, I would need to have a look at the structure of your project and would like to also know whether you are using ASP.NET Core or .ASP.NET Framework.

The "Loading..." text being shown indicates that the report viewer is not loading property. Otherwise, that should have been replaced with the report viewer element itself. To determine why the report viewer is not loading, please check for any failing requests for any of its resources in the Network tab in the Browser DevTools window.

Please also check for any console errors and if there are such and you need further assistance, share them in a comment so that I may see what is the issue.

I recommend visiting the Manual Setup of the HTML5 Report Viewer - Telerik Reporting article and making sure that the report viewer dependencies are correctly set up.