那些在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下困難多少。

產品介紹 | 下載試用 | 優惠活動 |