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

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

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

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

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

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

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

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

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)建了一個(gè)可在類中訪問(wèn)的Web報(bào)表對(duì)象。在Index ()方法中，我們?cè)陂_始時(shí)設(shè)置WebReport對(duì)象的大小——高度和寬度為100％。之后我們創(chuàng)建一個(gè)數(shù)據(jù)集。然后我們加載到xml數(shù)據(jù)庫(kù)中。我們?cè)趫?bào)表中注冊(cè)數(shù)據(jù)源。我們檢查報(bào)表模板文件是否存在，如果成功，則將其加載到報(bào)表對(duì)象中。

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

使用ViewBag，我們將報(bào)表對(duì)象傳遞給視圖。

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

為這些按鈕編寫Web方法。首先將報(bào)表上傳到服務(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)在報(bào)表下載方法到本地計(jì)算機(jī)：

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

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

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

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

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

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

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

<h2>@ViewBag.Message</h2>

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

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

現(xiàn)在讓我們轉(zhuǎn)到一個(gè)同樣有趣的部分——編寫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)建一個(gè)帶有文件上傳字段和按鈕的表單。作為參數(shù)，此幫助程序接受來(lái)自控制器的Web方法的名稱、控制器的名稱、請(qǐng)求的類型、數(shù)據(jù)的編碼方式。

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

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

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

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

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

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

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

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

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

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

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

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

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