那些在FastReport.Net中初次邂逅在線設(shè)計器的人肯定非常欣賞它的所有優(yōu)點(diǎn)，并且能夠在FastReport.Mono中使用，希望在他們的Web應(yīng)用程序中也可以使用它。事實(shí)上，這并沒什么難的。今天，我們將研究在MonoDevelop中創(chuàng)建Web應(yīng)用程序并在其中使用在線設(shè)計器的方法。

除了報表設(shè)計器之外，該頁面還會包含用于將報表下載到設(shè)計器并將編輯的報表保存到本地計算機(jī)的按鈕。

讓我們創(chuàng)建一個ASP .Net MVC項(xiàng)目：

我們需要在References中為項(xiàng)目添加庫：

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

使用在fast-report.com上在線設(shè)計器中匯編的在線設(shè)計器下載zip存檔。解壓縮歸檔文件并將WebReportDesigner文件夾添加到項(xiàng)目根目錄。

我們還需要一個文件夾，我們將在其中保存報表，存儲包含數(shù)據(jù)的文件。將App_Data文件夾添加到項(xiàng)目根目錄。我們將使用FastReport.Mono交付的演示報表，因此我們需要nwind.xml數(shù)據(jù)庫。將其添加到App_Data文件夾。

現(xiàn)在你可以開始編程了。在Controller文件夾中是HomeController.cs文件，修復(fù)它。在使用部分，我們需要庫：

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;

修復(fù)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();
 }

讓我們更詳細(xì)地看一下。以前，我們創(chuàng)建了一個可在類中訪問的Web報表對象。在Index ()方法中，我們在開始時設(shè)置WebReport對象的大小——高度和寬度為100％。之后我們創(chuàng)建一個數(shù)據(jù)集。然后我們加載到xml數(shù)據(jù)庫中。我們在報表中注冊數(shù)據(jù)源。我們檢查報表模板文件是否存在，如果成功，則將其加載到報表對象中。

接下來是Web報表對象的設(shè)置。打開報表編輯模式，可以顯示在線設(shè)計器。然后，指定設(shè)計器頁面的路徑。在下一步中，我們設(shè)置一個視圖以在保存報表時顯示回調(diào)。最后一個設(shè)置是報表對象的標(biāo)識符。我們將來需要這個用于View。

使用ViewBag，我們將報表對象傳遞給視圖。

正如我們在開始時所預(yù)計的那樣，除了報表設(shè)計器之外，該頁面還包含用于將報表下載到設(shè)計器并將編輯的報表保存到本地計算機(jī)的按鈕。

為這些按鈕編寫Web方法。首先將報表上傳到服務(wù)器：

[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
 }

現(xiàn)在報表下載方法到本地計算機(jī)：

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

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

tmp.frx報表文件的路徑在文件參數(shù)中指定。您已經(jīng)注意到在上一個方法中我們將報表保存為report.frx。但report.frx是已加載報表模板的文件，我們的目標(biāo)是編輯報表，并以不同的名稱保存。因此，我們需要另一種方法——保存已編輯報表的方法。我們將創(chuàng)建自己的事件處理程序，用于按下在線設(shè)計器中的報表保存按鈕：

[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();
 }

在第一行中，我們會顯示一條消息，確認(rèn)保存報表。然后，我們檢查報表標(biāo)識符，如果它等于“DesignReport”，那么我們將結(jié)果發(fā)送到stream。并基于此stream創(chuàng)建新的報表模板文件。

對于此方法，我們需要創(chuàng)建一個視圖。右鍵單擊方法簽名并創(chuàng)建一個新視圖（create view）：

在“view”代碼中，只需顯示消息：

<h2>@ViewBag.Message</h2>

因此，第二個文件將出現(xiàn)在主文件夾SaveDesignedReport.cshtml中。 

您還記得，在Index ()方法中，我們指定了web報表的屬性嗎？ webReport.DesignerSaveCallBack = "Home/SaveDesignedReport"？ 如果您不知道將調(diào)用哪個視圖來顯示回調(diào)以保存報表，則可以設(shè)置此屬性的值。

現(xiàn)在讓我們轉(zhuǎn)到一個同樣有趣的部分——編寫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()

在這里，我們顯示標(biāo)題。并使用BeginForm幫助程序創(chuàng)建一個帶有文件上傳字段和按鈕的表單。作為參數(shù)，此幫助程序接受來自控制器的Web方法的名稱、控制器的名稱、請求的類型、數(shù)據(jù)的編碼方式。

您還記得，我們在HomeController中創(chuàng)建了兩個方法：將報表下載到設(shè)計器并將報表下載到本地計算機(jī)。幫助程序創(chuàng)建的表單中的Web方法的名稱必須與控制器中的名稱匹配。

如您所見，我們還創(chuàng)建了一個帶有按鈕的表單，用于將報表從服務(wù)器下載到本地計算機(jī)。在最后一行代碼中，我們將報表轉(zhuǎn)換為HTML格式并顯示它。為此，請使用內(nèi)置方法GetHtml ()，這會導(dǎo)致將構(gòu)造的報表導(dǎo)出為此格式（在我們的示例中為設(shè)計器）。

在_Layout.cshtml頁面的主文件中，您需要連接FastReport腳本：

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

項(xiàng)目中有兩個Web配置。在ASP.Net項(xiàng)目中，web.config僅適用于它所在的目錄以及所有子目錄。因此，位于Views目錄中的Web.config是專門為視圖設(shè)計的。打開它并在Namspaces部分添加幾行：

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

第二個Web.config位于項(xiàng)目的根目錄，這意味著它配置整個應(yīng)用程序。我們將為其添加一個處理程序，以便將Web報表對象導(dǎo)出為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應(yīng)用程序。讓我們在xsp調(diào)試Web服務(wù)器上運(yùn)行它。只需按Ctrl + F5即可。

由于<input type = "file" name = "upload" />，出現(xiàn)了Browse ...按鈕和帶有文件名的標(biāo)簽。單擊此按鈕并選擇報表模板文件。

標(biāo)簽現(xiàn)在顯示文件名。單擊上傳按鈕：

該報表將上傳到設(shè)計器。現(xiàn)在我們可以對報表模板進(jìn)行必要的更改。然后轉(zhuǎn)到“Report”選項(xiàng)卡并單擊保存“save”圖標(biāo)：

之后，報表已準(zhǔn)備好下載，因此請單擊下載設(shè)計報表“Download designed report”按鈕。將出現(xiàn)一個標(biāo)準(zhǔn)瀏覽器對話框，我們可以在其中下載報表或拒絕操作。下載報表并在下載文件夾中找到它。

就這樣。如您所見，Linux上的ASP .Net Web項(xiàng)目非常真實(shí)，也沒有比在Windows下困難多少。

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動 |