65.9K
CodeProject 正在变化。 阅读更多。
Home

适用于 iPhone、Android 和所有其他设备的报表服务

Jason_Carlson
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2014年5月9日

CPOL

6分钟阅读

viewsIcon

30235

报表是收集或显示数据的任何应用程序的关键部分。用户很少对简单的列表感到满意；他们要求丰富的格式、图表和交互性。

引言

报表是收集或显示数据的任何应用程序的关键部分。用户很少对简单的列表感到满意；他们要求丰富的格式、图表和交互性。他们还希望将报表保存到设备上并订阅它们，以便他们可以在不进入应用程序的情况下跟踪信息。当他们在电子邮件中收到报表时，他们仍然希望这些报表具有交互性，并且可以从任何地方实时更新。

自我们发布 SQL Server Reporting Services (SSRS) 以来，13 年来技术一直在不断发展。现在，HTML5、MVC 和移动已成为“必备”要求。客户要求支持所有设备并流畅运行而无需重新加载整个页面的现代应用程序。SSRS 是一个功能非常强大的报表引擎，但 Report Viewer 控件不支持 MVC 应用程序，仍然是 HTML4 WebForms 控件。它也不一致地支持现代设备（iPhone、Android）和浏览器（Chrome、Firefox 和 Safari）。那么，如果您已经拥有数百份 SSRS 报表或需要在您的现代应用程序中进行报表，该怎么办？

答案是，您可以选择用另一种功能较少的技术重写所有报表，或者编写自己的 HTML5 Viewer Control 并用所有浏览器和设备进行测试。许多开发人员编写了 SSRS Viewer 控件。这工作量很大，尤其是如果您想支持 Reporting Services 中的所有功能。这种方法的缺点是，虽然这对于可以利用图像渲染器的 SilverLight 和 WPF 等其他技术来说已经足够了，但这种方法不适用于 HTML5。将极其复杂的 SSRS HTML4 输出和嵌入式脚本嵌入到 HTML5 应用程序中根本就行不通。因此，除了编写 HTML5 报表查看器控件之外，您还必须编写 HTML5 交互式渲染器。那些有雄心壮志查看 渲染 API 的人应该知道，这是 Reporting Services 中最复杂的 API。

解决方案

由于我领导了设计和实施 Reporting Services 的团队，因此我非常了解它的所有功能和复杂性。我利用这些经验创建了 Forerunner Software Mobilizer。Mobilizer 是一套 HTML5、jQuery 小部件和服务器代码，可满足您轻松将 SSRS 报表嵌入现代应用程序所需的一切。它已在所有浏览器和设备上得到全面测试，并附有完整的文档记录 JavaScript API。Mobilizer 还包含一个完整的最终用户应用程序，您可以在任何版本的 SSRS (2008+) 之上独立使用，无需额外开发。作为一个 HTML5 应用程序，通过简单地修改 CSS 文件，它也非常易于定制。

除了支持所有浏览器和设备上的所有 SSRS 功能外，我们还添加了许多增强功能来改善体验，包括

  • 智能手机和平板电脑的优化 UI
  • 基于设备大小的响应式报表重新布局
  • 缩略图渲染器
  • JSON 渲染器
  • 每个用户的默认参数
  • 参数筛选器（键入时搜索）
  • 托管的参数集
  • 每个用户的收藏夹和最近报表视图
  • Forms 身份验证，除了集成的 Windows 身份验证
  • 显著的性能增强，包括客户端的页面和报表缓存
  • 还有更多功能即将推出，包括
    • 最终用户订阅
    • 分层参数
    • 仪表板
    • …

架构

为了提供最自然的 MVC 和 HTML5 应用程序开发体验，我们使用 MVC API 控制器、JSON 和 REST API 构建了 Mobilizer。

在服务器端，我们使用 Forerunner.SQLReporting DLL 将 SSRS SOAP API 转换为基于 JSON 的 API。然后，我们有简单的 MVC API 控制器，将方法映射到 REST API。在客户端，我们有一组 jQuery 小部件，允许您轻松地将报表附加到任何 HTML 元素并调用任何小部件方法。所有 CSS 文件也包含在内，因此您可以将小部件样式化以匹配您的风格。通过这种方式，Mobilizer 可以轻松集成到您的网站中。

要将 Mobilizer SDK 添加到您的项目中，您只需要

  1. 将 Forerunner DLL 复制到您的 bin 文件夹
  2. 将 Forerunner 文件夹复制到您的项目中（默认位置是根目录，但可以放在任何地方）
  3. 将 sdk 文件夹中的 ReportViewer 和 ReportManager 控制器添加到您的项目中
  4. 修改您的 WebApiConfig.cs 文件，为 Mobilizer 控制器添加自定义 API 路由

有一个完整的 入门示例，其中详细解释了所有步骤。

入门

我们有一个不断增长的 示例 列表，其中包含所有源代码，可帮助您入门。Mobilizer 附带了几个小部件，您可以将它们组合成任何您想要的布局，或者使用我们的默认模板。这些小部件包括

  • 工具栏 – 带有所有默认按钮的工具栏小部件，API 用于删除和添加自定义按钮
  • 工具窗格 – 带有所有默认按钮的工具窗格小部件，API 用于删除和添加自定义按钮
  • 报表查看器 – 具有控制查看器体验的所有方法和事件的报表查看器小部件
  • 报表渲染器 – 从 RDL 创建实际报表的渲染小部件
  • 报表参数 – 支持所有参数功能
  • 页面导航 – 提供页面导航 UI
  • 报表文档映射 – 提供文档映射 UI
  • 报表浏览器 – 此小部件用于导航 SSRS 文件夹层次结构
  • 报表查看器 EZ – 查看器 EZ 小部件为所有查看器小部件提供默认模板布局
  • 报表浏览器 EZ - 浏览器 EZ 小部件为所有浏览器小部件提供默认模板布局

使用这些小部件，只需几行代码即可将报表添加到您的应用程序中。要让报表查看器接管您页面的整个主体并使用默认布局模板，如下所示，您只需要 3 行代码。

首先，您需要创建 ReportViewerEZ 小部件。要在 jQuery 中创建小部件，您可以调用其构造函数，将其附加到您想要附加它的 HTML 元素上。在这种情况下，我们希望它附加到 body 对象，因为我们要接管整个页面。保留小部件的指针以供后续调用也很方便。

var $reportViewerEZ = $('body').reportViewerEZ();

在 body 上创建 ReportViewerEZ 小部件后，我们需要告诉它我们要显示哪个报表。为此，我们需要从 ReportViewerEZ 获取 ReportViewer 小部件并调用 load report。

var $reportViewer = $reportViewerEZ.reportViewerEZ("getReportViewer");
$reportViewer.reportViewer("loadReport","/AdventureWorks 2008 Sample Reports/Product Line Sales 2008"

@{
    ViewBag.Title = "ReportViewerEZ Sample";
    Layout = "../Shared/_SamplesLayout.cshtml";
}

@section scripts {
<script>
  $(document).ready(function () {
    // Create the reportViewerEZ widget and hold onto a reference
    var $reportViewerEZ = $('body').reportViewerEZ();

    // Get the reportViewer widget from reportViewerEZ and load the report
    var $reportViewer = $reportViewerEZ.reportViewerEZ("getReportViewer");
$reportViewer.reportViewer("loadReport","/AdventureWorks 2008 Sample Reports/Product Line Sales 2008"
    );
  });
</script>
}

如果您想构建一个类似仪表板的页面，其中有多个报表分布在不同区域，您只需创建支持的 HTML 布局并像上面一样加载报表，但将 isFullScreen 设置为 false。要创建此布局，顶部有两个报表，底部有一个报表，我们使用一个具有 2 行和 2 列的表。我们将第二行的 colspan 设置为 2。我们还需要设置报表区域的大小。您可以在此示例中设置最小大小，以便报表可以根据需要增长，或者设置固定大小并获得滚动条。

@{
    ViewBag.Title = "Dashboard Sample";
    Layout = "../Shared/_SamplesLayout.cshtml";
}

@section styles {
// Setup your Styles
  <style>
    body { background-color: rgb(210, 223, 237); }

    .report-container { box-shadow: 0 0 7px #545454; margin: 4px 4px 4px 4px; background-color: white; position:relative; }

    #Report1 { min-width:543px; min-height:500px; }
    #Report2 { min-width:543px; min-height:500px; }
    #Report3 { min-width:1096px; min-height:406px; }
  </style>
}

<script>

//Attach the viewer to your HTML elements with the reports you want.
  $(document).ready(function () {
var $reportViewerEZ1 = $('#Report1').reportViewerEZ({isFullScreen: false});
    var $reportViewer1 = $reportViewerEZ1.reportViewerEZ("getReportViewer");
    $reportViewer1.reportViewer("loadReport", "/Northwind Test Suite/SalesByCountry");

    var $reportViewerEZ2 = $('#Report2').reportViewerEZ({isFullScreen: false});
    var $reportViewer2 = $reportViewerEZ2.reportViewerEZ("getReportViewer");
    $reportViewer2.reportViewer("loadReport", "/Northwind Test Suite/SalesByYear");

    var $reportViewerEZ3 = $('#Report3').reportViewerEZ({isFullScreen: false});
    var $reportViewer3 = $reportViewerEZ3.reportViewerEZ("getReportViewer");
    $reportViewer3.reportViewer("loadReport", "/Northwind Test Suite/SalesByEmployee");
  });
</script>

//Define your HTML layout
<h1>This is a Dashboard sample showing 3 reports on a page</h1>
<table>
    <tr>
        <td>
            <div id="Report1" class="report-container" />
        </td>
        <td>
            <div id="Report2" class="report-container" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="Report3" class="report-container" />
        </td>
    </tr>
</table>

使用浏览器小部件同样简单。与全页报表查看器示例一样，我们将使用 body 来托管我们的控件并保留一个指针以供以后使用。

var $container = $('body');
$container.reportExplorerEZ();

然后，我们只需要加载根文件夹。

$container.reportExplorerEZ("transitionToReportManager", "/", null);

@{
    ViewBag.Title = "ReportExplorerEZ Sample";
    Layout = "../Shared/_SamplesLayout.cshtml";
}

@section scripts {
<script>
    $(function () {
        // This sample is full page so the container will be the body
        var $container = $('body');

        // Create the report explorer widget
        $(document).ready(function () {
            $container.reportExplorerEZ();

            // Transition to the home catalog view
            $container.reportExplorerEZ("transitionToReportManager", "/", null);
        });
    })  // function ()
</script>
}

后续步骤

我们不额外收费来开发和测试您的应用程序。我们提供 30 天功能齐全的免费试用版，并且每个生产许可证都附带免费的开发和测试许可证。

与我们联系！

© . All rights reserved.