The Web Report Viewer supports all common browser types. Thus, it can be used on clients with different operating systems. It allows interactive input through drilldown and report parameters.

Requirements

• In order to use the Web Report Designer in your own ASP.NET project, the two List & Label NuGet packages combit.ListLabel30 and combit.ListLabel30.Web must be added. The other external dependencies are added automatically. Further details on the use of NuGet packages and deployment can be found under NuGet Package Support.
• Additionally locate the line builder.Services.AddControllersWithViews(); and replace it with builder.Services.AddControllersWithViews().AddNewtonsoftJson();.

Integration - Create new Controller

Then create a new controller as usual - in the following the name MyWebReportViewerController is used as an example. Derive the controller from the WebReportViewerController class:

...
public class MyWebReportViewerController : WebReportViewerController
...

...
Public Class MyWebReportViewerController
        Inherits WebReportViewerController
...

Integration - Override important Methods

Then implement the two abstract methods OnProvideListLabel and OnProvideRepository. Pass your List & Label instance with matching data source and temporary export path repectively the Repository to be used in the respective arguments provided.

...
public override void OnProvideListLabel(ProvideListLabelContext provideListLabelContext)
{
    // Create List & Label object
    ListLabel ll = new ListLabel();
    ll.LicensingInfo = "<ToDo: insert your license here>";

    // Define datasource
    var dataSource = GetDataProvider(provideListLabelContext.RepositoryItemId);
    ll.DataSource = dataSource;

    // The Web Report Viewer requires a directory for temporary files. Some minutes after a Web Report Viewer is closed, these files will be deleted automatically
    provideListLabelContext.ExportPath = Server.MapPath("~/App_Data/TempFiles");

    // Return configured List & Label object
    provideListLabelContext.NewInstance = ll;
}

public override void OnProvideRepository(ProvideRepositoryContext provideFileRepositoryContext)
{
    provideFileRepositoryContext.FileRepository = DefaultSettings.GetRepository();
} 
...

...
Public Overrides Sub OnProvideListLabel(ByVal provideListLabelContext As ProvideListLabelContext)

    ' Create List & Label object
    Dim ll As ListLabel = New ListLabel()
    ll.LicensingInfo = "<ToDo: insert your license here>"

    ' Define datasource
    Dim dataSource = GetDataProvider(provideListLabelContext.RepositoryItemId)
    ll.DataSource = dataSource

    ' The Web Report Viewer requires a directory for temporary files. Some minutes after a Web Report Viewer is closed, these files will be deleted automatically
    provideListLabelContext.ExportPath = Server.MapPath("~/App_Data/TempFiles")

    ' Return configured List & Label object
    provideListLabelContext.NewInstance = ll

End Sub

Public Overrides Sub OnProvideRepository(ByVal provideFileRepositoryContext As ProvideRepositoryContext)

    provideFileRepositoryContext.FileRepository = DefaultSettings.GetRepository()

End Sub
...

Integration - .NET Switch

The further procedure differs for .NET 6/.NET 8/.NET 9 and .NET 4.8.

.NET 6/.NET 8/.NET 9:

If you see a startup.cs file (otherwise see below), add the following lines to the end of the Configure method:

...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // do some other stuff here
    // ...

    app.UseWebReportViewer();
}
...

If there is no startup.cs you should have a program.cs in .NET 6. In this case, add app.UseWebReportViewer(); right after any other app.Use... call and add builder.Services.AddWebReportViewer(); right after any other builder.Services... call. 

.NET 4.8:

In the global.asax.cs/global.asax.vb file, add the following line before the RouteConfig.RegisterRoutes() call:

...
WebReportViewerConfig.RegisterRoutes(RouteTable.Routes);
...

...
WebReportViewerConfig.RegisterRoutes(RouteTable.Routes)
...

Integration - Using in Front-End

This completes the configuration in the back-end. The front-end can now be integrated. In the front-end, the choice of technology is completely free.

ASP.NET MVC with Razor View

...
@using combit.Reporting.Web
@{
    Layout = null;
    string repositoryId = "305D94C6-E5DC-4BE1-BC43-12CBC532EEE6";
    var optionWRV = new WebReportViewerMVCOptions(repositoryId)
    {
        Title = "Web Report Viewer"
    };
}
<!DOCTYPE html>
@Html.WebReportViewer(optionWRV)
...

JavaScript like React, Vue.js and Angular

If other front-end technologies such as React, Vue.js or Angular are used, the JavaScript file for the Web Report Viewer (WebReportViewer.js) must be integrated and the viewer tag in the desired position in the HTML source code.

...
import { useExternalScript } from './hooks/useExternalScript';
export const WebReportViewer = () => {
    const state = useExternalScript("https://localhost:7146/WebReportViewer.js");
    return (
        <div>
            <div>
                <title>WebReportViewer</title>
            </div>
            <div>
                {state === "loading" && <p>Loading...</p>}
                {state === "ready" && <ll-webreportviewer backendurl="https://localhost:7146/LLWebReportViewer" defaultProject="305D94C6-E5DC-4BE1-BC43-12CBC532EEE6" />
            </div>
        </div>
    );
}
...

...
<template>
    <div class="WebReportViewer">
        <WebReportViewer />
    </div>
</template>
<script>// @ is an alias to /src
import WebReportViewer from '@/components/WebReportViewer.vue'
export default {
  name: 'WebReportViewerView',
  components: {
    WebReportViewer
  },
      mounted() {
            let wrvScript = document.createElement('script')
            wrvScript.setAttribute('src', 'https://localhost:5011/WebReportViewer.js')
            document.head.appendChild(wrvScript)
        },
}</script>
...
<template>
    <ll-webreportviewer backendurl="https://localhost:5011/LLWebReportViewer" defaultProject="305D94C6-E5DC-4BE1-BC43-12CBC532EEE6" />
</template>
<script lang="ts">
</script>
...

...
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="http://localhost:5184/WebReportViewer.js"></script>
  <meta charset="utf-8" />
  <title>Angular Web Report Viewer</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="assets/favicon.png" />
</head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>
...
<div>
    <ll-webreportviewer backendUrl="http://localhost:5184/LLWebReportViewer" defaultProject="305D94C6-E5DC-4BE1-BC43-12CBC532EEE6" />
</div>
...

Further

The List & Label installation contains corresponding ASP.NET examples that show the use of the Web Report Viewer in detail.