那些在FastReport.Net中初次邂逅在线设计器的人肯定非常欣赏它的所有优点，并且能够在FastReport.Mono中使用，希望在他们的Web应用程序中也可以使用它。事实上，这并没什么难的。今天，我们将研究在MonoDevelop中创建Web应用程序并在其中使用在线设计器的方法。

除了报表设计器之外，该页面还会包含用于将报表下载到设计器并将编辑的报表保存到本地计算机的按钮。

让我们创建一个ASP .Net MVC项目：

我们需要在References中为项目添加库：

FastReport.Mono、FastReport.Web、System.Net.Http。

使用在fast-report.com上在线设计器中汇编的在线设计器下载zip存档。解压缩归档文件并将WebReportDesigner文件夹添加到项目根目录。

我们还需要一个文件夹，我们将在其中保存报表，存储包含数据的文件。将App_Data文件夹添加到项目根目录。我们将使用FastReport.Mono交付的演示报表，因此我们需要nwind.xml数据库。将其添加到App_Data文件夹。

现在你可以开始编程了。在Controller文件夹中是HomeController.cs文件，修复它。在使用部分，我们需要库：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI;
using System.Text;
using System.IO;
using FastReport;
using FastReport.Web;
using FastReport.Utils;
using System.Web.UI.WebControls;
using FastReport.Export.Html;
using FastReport.Data;
using System.Net.Http.Headers;
using FastReport.Export.Image;
using System.Net.Http;

修复main，到目前为止唯一的Web方法索引：

private WebReport webReport = new WebReport(); // Web report object
public ActionResult Index()
 {
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 System.Data.DataSet dataSet = new System.Data.DataSet();
 dataSet.ReadXml("App_Data/nwind.xml"); // Read database
 webReport.Report.RegisterData(dataSet, "NorthWind"); // Register data in the report
if (System.IO.File.Exists("App_Data/report.frx"))
 {
 webReport.Report.Load("App_Data/report.frx");
 }
 webReport.DesignReport = true;
 webReport.DesignerPath = "WebReportDesigner/index.html";
 webReport.DesignerSaveCallBack = "Home/SaveDesignedReport";
 webReport.ID = "DesignReport";
 ViewBag.WebReport = webReport; // Pass the report to View
 return View();
 }

让我们更详细地看一下。以前，我们创建了一个可在类中访问的Web报表对象。在Index ()方法中，我们在开始时设置WebReport对象的大小——高度和宽度为100％。之后我们创建一个数据集。然后我们加载到xml数据库中。我们在报表中注册数据源。我们检查报表模板文件是否存在，如果成功，则将其加载到报表对象中。

接下来是Web报表对象的设置。打开报表编辑模式，可以显示在线设计器。然后，指定设计器页面的路径。在下一步中，我们设置一个视图以在保存报表时显示回调。最后一个设置是报表对象的标识符。我们将来需要这个用于View。

使用ViewBag，我们将报表对象传递给视图。

正如我们在开始时所预计的那样，除了报表设计器之外，该页面还包含用于将报表下载到设计器并将编辑的报表保存到本地计算机的按钮。

为这些按钮编写Web方法。首先将报表上传到服务器：

[HttpPost] // The attribute indicates that the method processes the Post request.
 public ActionResult Upload(HttpPostedFileBase upload)
 {
 if (upload != null)
 {
 // Save the file on the server
 upload.SaveAs("App_Data/report.frx");
 }
 return RedirectToAction("Index"); // Call web index method
 }

现在报表下载方法到本地计算机：

public FileResult GetFile()
 {
 return File("App_Data/tmp.frx", "application/octet-stream", "tmp.frx");
 }

好方法！只需一行。如果他们都像那样......

tmp.frx报表文件的路径在文件参数中指定。您已经注意到在上一个方法中我们将报表保存为report.frx。但report.frx是已加载报表模板的文件，我们的目标是编辑报表，并以不同的名称保存。因此，我们需要另一种方法——保存已编辑报表的方法。我们将创建自己的事件处理程序，用于按下在线设计器中的报表保存按钮：

[HttpPost]
 // call-back for save the designed report
 public ActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID);
 
 if (reportID == "DesignReport")
 {
 Stream reportForSave = Request.InputStream;
 string pathToSave = "App_Data/tmp.frx";
 
 using (FileStream file = new FileStream(pathToSave, FileMode.Create))
 {
 reportForSave.CopyTo(file);
 }
 }
 
 return View();
 }

在第一行中，我们会显示一条消息，确认保存报表。然后，我们检查报表标识符，如果它等于“DesignReport”，那么我们将结果发送到stream。并基于此stream创建新的报表模板文件。

对于此方法，我们需要创建一个视图。右键单击方法签名并创建一个新视图（create view）：

在“view”代码中，只需显示消息：

<h2>@ViewBag.Message</h2>

因此，第二个文件将出现在主文件夹SaveDesignedReport.cshtml中。 

您还记得，在Index ()方法中，我们指定了web报表的属性吗？ webReport.DesignerSaveCallBack = "Home/SaveDesignedReport"？ 如果您不知道将调用哪个视图来显示回调以保存报表，则可以设置此属性的值。

现在让我们转到一个同样有趣的部分——编写Index.cshtml视图：

@{
 ViewBag.Title = "Home Page";
}
<h3>Select file</h3>
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
 <input type="file" name="upload" />
 <input type="submit" value="Upload" />
}
@using (Html.BeginForm("GetFile", "Home", FormMethod.Get))
 {
 <input id="dwn" type="submit" value="Download designed report" />
 }
@ViewBag.WebReport.GetHtml()

在这里，我们显示标题。并使用BeginForm帮助程序创建一个带有文件上传字段和按钮的表单。作为参数，此帮助程序接受来自控制器的Web方法的名称、控制器的名称、请求的类型、数据的编码方式。

您还记得，我们在HomeController中创建了两个方法：将报表下载到设计器并将报表下载到本地计算机。帮助程序创建的表单中的Web方法的名称必须与控制器中的名称匹配。

如您所见，我们还创建了一个带有按钮的表单，用于将报表从服务器下载到本地计算机。在最后一行代码中，我们将报表转换为HTML格式并显示它。为此，请使用内置方法GetHtml ()，这会导致将构造的报表导出为此格式（在我们的示例中为设计器）。

在_Layout.cshtml页面的主文件中，您需要连接FastReport脚本：

<head>
…
@WebReportGlobals.Scripts()
@WebReportGlobals.Styles()
</head>

项目中有两个Web配置。在ASP.Net项目中，web.config仅适用于它所在的目录以及所有子目录。因此，位于Views目录中的Web.config是专门为视图设计的。打开它并在Namspaces部分添加几行：

<system.webServer>
 <namespaces>
…
 <add namespace="FastReport" />
 <add namespace="FastReport.Web" />
 </namespaces>

第二个Web.config位于项目的根目录，这意味着它配置整个应用程序。我们将为其添加一个处理程序，以便将Web报表对象导出为Html格式：

<system.webServer>
 <handlers>
 …
 <add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
 </handlers>
 </system.webServer>

如果web.config中没有<system.webServer>和<namespaces>部分，则添加它们。

在此步骤中，我们可以将其视为我们的小型Web应用程序。让我们在xsp调试Web服务器上运行它。只需按Ctrl + F5即可。

由于<input type = "file" name = "upload" />，出现了Browse ...按钮和带有文件名的标签。单击此按钮并选择报表模板文件。

标签现在显示文件名。单击上传按钮：

该报表将上传到设计器。现在我们可以对报表模板进行必要的更改。然后转到“Report”选项卡并单击保存“save”图标：

之后，报表已准备好下载，因此请单击下载设计报表“Download designed report”按钮。将出现一个标准浏览器对话框，我们可以在其中下载报表或拒绝操作。下载报表并在下载文件夹中找到它。

就这样。如您所见，Linux上的ASP .Net Web项目非常真实，也没有比在Windows下困难多少。

产品介绍 | 下载试用 | 优惠活动 | 在线客服

相关产品： FastReport.Mono, FastReport.Net,