combit List & Label 24 - .NET Online Web Help
Use the HTML5-Viewer
Programming Introduction > Examples > Web Reporting > Use the HTML5-Viewer

The HTML5 Viewer is available in ASP.NET WebForms and ASP.NET MVC applications and supports all popular browsers. Therefore it is applicable on clients with different operating systems. It allows interactive input through Drilldown and report parameters.

Basic Concepts

Integration

To integrate the HTML5 Viewer into your application proceed as follows. Further details can be found in the provided application samples for ASP.NET.

 Step 1: Add HTML5 Viewer to your application

ASP.NET Web Forms:

In an ASP.NET WebForms application just add the Html5ViewerControl from the combit.ListLabel24.Web namespace of the combit.ListLabel24.Web.dll. Please also see the example in the List & Label installation directory under "Programmable Samples and Declarations\Microsoft .NET\ASP.NET\C# Web Reporting Sample\ HTML5Viewer.aspx":

<%@ Register TagPrefix="combit" Namespace="combit.ListLabel24.Web" Assembly="combit.ListLabel24.Web" %>
<html>
<head>
    <title><asp:Literal ID="LTViewerTitle" runat="server"></asp:Literal></title>
</head>
<body>
    <form method="post" runat="server">
        <div>
            <combit:Html5ViewerControl ID="Html5ViewerControl1" runat="server"></combit:Html5ViewerControl>
        </div>
    </form>
</body>
</html>

 

ASP.NET MVC:

@using combit.ListLabel24.Web
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @Html.Html5Viewer((string)ViewBag.InstanceName, null);
    </div>
</body>
</html>
@Imports combit.ListLabel24.Web
@Code
     Layout = Nothing
END Code
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewData("Title")</title>
</head>
<body>
    <div>
        @Html.Html5Viewer(DirectCast(ViewData("InstanceName"), String), Nothing);
    </div>
</body>
</html>                     

Please also see the example in the List & Label installation directory under "Programmable Samples and Declarations\Microsoft .NET\ASP.NET\C# MVC Web Reporting Sample\MVC Web Reporting Sample\Views\Home\HTML5Viewer.cshtml" or "Programmable Samples and Declarations\Microsoft .NET\ASP.NET\VB.NET MVC Web Reporting Sample\MVC Web Reporting Sample\Views\Home\HTML5Viewer.vbhtml".   

 Step 2: Setup project file and other data on the server side

The necessary routes will need to be registered in the Application_Start() function of your application (Global.asax file), even if your application is not based on ASP.NET MVC. Add the following lines:

Html5ViewerConfig.RegisterRoutes(RouteTable.Routes);
Html5ViewerConfig.OnListLabelRequest += Services_OnListLabelRequest;
Html5ViewerConfig.RegisterRoutes(RouteTable.Routes)
AddHandler Html5ViewerConfig.OnListLabelRequest, AddressOf Services_OnListLabelRequest

Important: If you are also using MVC/Web API, the Html5ViewerConfig.RegisterRoutes function must be registered before your own routes.

 

In the event handler the data required for the HTML5 Viewer will be passed:

private void Services_OnListLabelRequest(object sender, ListLabelRequestEventArgs e)
{
    ListLabel ll = new ListLabel();
   
    // set license key for List & Label (client + server). If not set, a license error will be displayed on non-development machines.
    ll.LicensingInfo = "<ToDo: insert license here>";
   
    ll.DataSource = DataAccess.SampleData.CreateProviderCollection(reportName);
   
    ll.AutoProjectFile = _reportsPath + e.ReportName;
    e.ExportPath = Path.GetTempPath(); // set temp directory;
   
    e.NewInstance = ll;
}
Private Sub Services_OnListLabelRequest(sender As Object, e As ListLabelRequestEventArgs)
    Dim ll As New ListLabel()
    ' set license key for List & Label (client + server). If not set, a license error will be displayed on non-development machines.
    ll.LicensingInfo = "<ToDo: insert license here>"
    ll.DataSource = DataAccess.SampleData.CreateProviderCollection(reportName)
    ll.AutoProjectFile = _reportsPath + e.ReportName
    e.ExportPath = Path.GetTempPath() ' set temp directory;
    e.NewInstance = ll
End Sub
               

The name of the selected report can be set in ASP.NET WebForms by using the ReportName property of the Html5ViewerControl object. In ASP.NET MVC it can directly passed as a parameter of the HtmlHelper extension method @Html.Html5Viewer()

In the OnListLabelRequest event it is then available again under e.ReportName, so that the corresponding data source and project file can be loaded.

 

Options
The Html5ViewerOptions class that you assign to the Options property of the Html5ViewerControl or pass as a parameter of the HtmlHelper extension method @Html.Html5Viewer() enables you to define where required jQuery and jQuery Mobile files should be loaded from (CDNType), which CSS files should be loaded (ThemeCSSUrl, ThemeIconsCSSUrl) or which jQuery Mobile theme should be used (DataTheme). For more information about these formatting options please see the jQuery Mobile help available online.