Verwendung des HTML5-Viewers

In diesem Thema

Hinweis: Der HTML5 Viewer ist als obsolete markiert und wurde durch den Web Report Viewer ersetzt.

Der HTML5-Viewer steht in ASP.NET WebForms und ASP.NET MVC Applikationen zur Verfügung und unterstützt alle gängigen Browsertypen. Dadurch ist er auf Clients mit unterschiedlichen Betriebssystemen einsetzbar. Er erlaubt eine interaktive Eingabe durch Drilldown und Berichtsparameter.

Grundkonzepte

In ASP.NET WebForms platzieren Sie das Html5ViewerControl auf der Webseite. In ASP.NET MVC können Sie die HtmlHelper-Erweiterungsmethode verwenden.

Serverseitig setzen Sie die DataSource, die Projektdatei, den Temporärpfad und einige optionale Eigenschaften in einem Ereignis, das vom HTML5-Viewer aufgerufen wird.

Einbindung

Zur Einbindung des HTML5-Viewers in Ihre Anwendung gehen Sie wie folgt vor. Weitere Details können Sie den mitgelieferten Anwendungsbeispielen für ASP.NET entnehmen.

Step 1: HTML5-Viewer zur Anwendung hinzufügen

ASP.NET Web Forms:

In einer ASP.NET WebForms Anwendung können Sie einfach das Html5ViewerControl aus dem Namespace combit.Reporting.Web aus der combit.ListLabel28.Web.dll hinzufügen. Vergleichen Sie dazu bitte auch das Beispiel im List & Label Installationsverzeichnis 'Web Reporting Sample'.

ASP.NET MVC:

cshtml
vbhtml

@using combit.Reporting.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.Reporting.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>

Vergleichen Sie dazu bitte auch das Beispiel im List & Label Installationsverzeichnis unter 'MVC Web Reporting Sample'.

Step 2: Daten, Projektdatei und andere Daten serverseitig einstellen

Der HTML5-Viewer nutzt zur internen Verarbeitung der HTTP-Requests immer ASP.NET MVC. Es müssen daher in der Application_Start()-Funktion Ihrer Anwendung (Global.asax-Datei) die notwendigen Routen registriert werden – auch wenn Sie in Ihrer Anwendung nicht auf ASP.NET MVC setzen. Fügen Sie folgende Zeilen ein:

Wichtig: Falls Sie selbst MVC/Web API einsetzen, muss die Html5ViewerConfig.RegisterRoutes-Funktion unbedingt vor Ihren eigenen Routen registriert werden.

Im Ereignis-Handler werden die für den HTML5-Viewer benötigten Daten übergeben.

C#
VB.NET

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

Der Name des gewählten Berichts kann in ASP.NET WebForms über die Eigenschaft ReportName des Html5ViewerControl-Objekts gesetzt werden. In ASP.NET MVC kann er direkt in der HtmlHelper-Erweiterungsmethode @Html.Html5Viewer() als Parameter übergeben werden.

Im OnListLabelRequest-Event steht dieser Name unter e.ReportName wieder zur Verfügung, sodass Sie die passende Datenquelle und Projektdatei laden können.

Optionen
Die Klasse Html5ViewerOptions, die Sie der Options-Eigenschaft des Html5ViewerControl zuweisen oder der HtmlHelper-Erweiterungsmethode @Html.Html5Viewer() als Parameter übergeben können, bietet die Möglichkeit zu bestimmen, woher die notwendigen jQuery und jQuery Mobile-Dateien geladen wer-den können (CDNType), welche CSS-Dateien geladen werden sollen (ThemeCSSUrl, ThemeIconsCSSUrl) oder welches jQuery Mobile Theme benutzt werden soll (Data-Theme). Für nähere Hinweise zu diesen Formatierungsoptionen verwenden Sie bitte die jQuery Mobile Hilfe im Internet.

Feedback senden