文檔半島外圍網上直營>>FastReport-web報表開發系列教程（持續更新中）>>如何使用外部控件來管理Web報表屬性

如何使用外部控件來管理Web報表屬性

本文旨在闡明，在ASP .Net MVC項目中，如何通過Web表單控件管理報表。

所以，我們需要創建一個Web應用程序，它將允許：

1）上傳Web報表;

2）以三種格式之一導出報表;

3）顯示/隱藏報表的Web工具欄;

4）自定義工具欄上按鈕的樣式;

5）在Online Designer上運行報表。

我們開工。首先，我們將做一些準備工作，在MVC應用程序中啟動一個Web報表。添加對以下庫的引用：FastReport和FastReport.Web。

現在你需要編輯文件夾“Views-> Shared”中的_Layout.cshtml文件。為header添加腳本和樣式：

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

在視圖文件夾中有一個Web.config文件，給它添加命名空間：

<namespaces>
 <add namespace="FastReport" />
 <add namespace="FastReport.Web" />
 </namespaces>

在項目的根目錄，還有另一個Web.config。在其中我們添加一個處理句柄，緊隨modules部分之后：

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

在HomeController中，我們添加報表的工作邏輯。

在Index方法中，我們將加載報表并將其發送到視圖。

public ActionResult Index()
 {
 SetReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 ViewBag.WebReport = webReport;
 return View();
 }

我把報表上傳到一個單獨的方法，我們將在下面討論。將web報表的寬度和高度設置為100％。使用ViewBag，我們將報表傳遞給視圖。并返回索引視圖。

為了在不同的方法中使用報表對象，我創建了一個全局變量，一個WebReport對象的實例。

public WebReport webReport = new WebReport();

1）現在考慮下載報表：

private void SetReport()
 {
 string report_path = GetReportPath();
 System.Data.DataSet dataSet = new System.Data.DataSet();
 dataSet.ReadXml(report_path + "nwind.xml");
 webReport.Report.RegisterData(dataSet, "NorthWind");
 webReport.Report.Load(report_path + "Master-Detail.frx");
 }

指定包含報表的文件夾的路徑。為了方便起見，我創建了一個將路徑變量分配給報表的單獨方法。接下來，創建一個“DataSet”的實例并加載XML數據庫。然后，我們在報表對象中注冊數據源。最后，將報表模板加載到WebReport對象中。

指定包含報表的文件夾路徑的方法：

private string GetReportPath()
 {
 return this.Server.MapPath("~/App_Data/");
 }

2）在進入“視圖”之前，再添加一個選擇報表導出的方法：

public void ReportExport(string type)
 {
 SetReport();
 switch (type)
 {
 case "pdf":
 webReport.ExportPdf();
 break;
 case "csv":
 webReport.ExportCsv();
 break;
 default:
 webReport.ExportWord2007();
 break;
 }

這里我們加載一個報表。根據類型參數的值，我們執行三種類型的導出之一。

現在打開“索引”視圖。將包含三個導出選項的下拉列表添加到表單中：

@using (Html.BeginForm("ReportExport", "Home"))
 {
 @Html.DropDownList("Type", new List<SelectListItem>()
{
 new SelectListItem(){ Text= "PDF", Value = "pdf"},
 new SelectListItem(){ Text= "CSV", Value = "csv"},
 new SelectListItem(){ Text= "Word", Value = "doc"},
}, "Select export type")
 <input id="pdf" type="submit" value="Export" />
 }
@ViewBag.WebReport.GetHtml()

這里我們使用了一個html助手來創建一個表單，它指向控制器“Home”和action（method）“ReportExport”。請記住，我們已經在控制器中創建了這個方法。在表單內部，我們創建一個DropDownList控件，并為其填充值。當然，你可以創建一個數據模型。但是，鑒于列表只有三個元素，所以我直接在視圖中填充了它。下拉列表打開后，會出現一個提交類型的按鈕，它會在網頁上刷新。

就像你記得的那樣，ReportExport方法需要一個類型參數 - 一個來自下拉列表的值。根據所選值，報表將被導出為適當的格式。

3）現在實現報表工具欄的隱藏。視圖代碼如下所示：：

@using (Html.BeginForm("Index", "Home"))
{
@Html.CheckBox("Toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar
}

和前面的例子一樣，我們創建一個表單。但是，這一次我們指定了"Index"指令 - 我們在那里顯示報表。在表單中，我們創建了一個CheckBox元素。它的值將被傳遞給Index方法。這一次，我決定不添加另一個按鈕來更新頁面，我使用了"onchange"事件，它具有發送表單“this.form.submit ()”的功能。現在，如果你更改復選框的值，頁面將被刷新。

類似于導出報表，我們需要傳遞一個參數給方法。在這種情況下，要傳遞的是“工具欄”。布爾函數的字符串將被傳輸。我們繼續：

public ActionResult Index(string toolbar)
 {
 SetReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 if (toolbar == "true")
 webReport.ShowToolbar = true;
 else
 webReport.ShowToolbar = false;
 
 ViewBag.WebReport = webReport;
 return View();
 }

在該方法中，添加了一個參數和條件。根據工具欄參數的值，我們可以決定啟用或禁用它。

4）現在讓我們轉到控件的創建，借助它我們可以選擇圖標樣式。我們將添加四個更多的RadioButton元素到前面的例子中：

@using (Html.BeginForm("Index", "Home"))
 {
 <table>
 <tr>
 <td>
 @Html.CheckBox("Toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar
 </td>
 <tr>
 <tr>
 <td>Black Buttons:</td><td> @Html.RadioButton("Radio", "Black Buttons", true, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 <tr>
 <td>Green Buttons:</td><td> @Html.RadioButton("Radio", "Green Buttons", false, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 <tr>
 <td>Blue Buttons:</td><td>@Html.RadioButton("Radio", "Blue Buttons", false, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 <tr>
 <td>Red Buttons:</td><td>@Html.RadioButton("Radio", "Red Buttons", false, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 </table>
@ViewBag.WebReport.GetHtml()

為了改善外觀，我把項目放到表單里。。讓我們考慮一下RadioButton組件：

Html.RadioButton("Radio", "Black Buttons", true, new { style = "width: 13px;", @onchange = "this.form.submit()" })

這是控件的名稱 - “Radio”。這是Index操作中另一個參數的名稱。下一個參數 - “Black Buttons”。也就是說，工具欄將顯示黑色按鈕。下一個值表示選定的單選按鈕是否被默認標記。最后一個參數是HtmlAttributes對象。在這里，你可以為<input type = "radio" />標簽指定任何可用的屬性。我利用這一點，指定控件的寬度和“onchange”事件，類似于前面的復選框元素。

所以，只有四個單選按鈕 - 工具欄中的四種風格的圖標。讓我們回到Index指令：

public ActionResult Index(string toolbar, string radio)
 {
 SetReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 if (toolbar == "true")
 webReport.ShowToolbar = true;
 else
 webReport.ShowToolbar = false;
switch (radio)
 {
 case "Red Buttons":
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Red;
 break;
 case "Green Buttons":
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Green;
 break;
 case "Blue Buttons":
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Blue;
 break;
 default:
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Black;
 break;
 }
 
 ViewBag.WebReport = webReport;
 return View();
 }

現在再添加一個參數 - "radio"。在交換機設計中，我根據radio的值指定了所需的風格。我們將參數“radio”和“toolbar”的處理分配到不同的方法中。

public void ShowToolbar(string toolbar)
 {
 if (toolbar == "true")
 webReport.ShowToolbar = true;
 else
 webReport.ShowToolbar = false;
 }
 
 public void ToolbarStyle(string radio)
 {
 switch (radio)
 {
 case "Red Buttons":
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Red;
 break;
 case "Green Buttons":
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Green;
 break;
 case "Blue Buttons":
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Blue;
 break;
 default:
 webReport.ToolbarIconsStyle = ToolbarIconsStyle.Black;
 break;
 }
 }

"Index"也發生了變化：

public ActionResult Index(string toolbar, string radio)
 {
 SetReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
ShowToolbar(toolbar);
 ToolbarStyle(radio);
 ViewBag.WebReport = webReport;
 return View();
 }

5）繼續實施最后一個設想的功能 -在Online Designer中運行報表。值得一提的是，為了顯示它，需要從官網下載“OnlineDesigner”程序集并將其包含在項目中。只需解壓并將整個WebReportDesigner文件夾添加到項目的根目錄即可。

將按鈕和隱藏的字段添加到前面例子里的表單中：

<input id="dsg" type="submit" value="@ViewBag.Result" onclick="document.getElementById('hid').value='@ViewBag.WebReport.DesignReport.ToString()'"/>
<input id="hid" type="hidden" name="dsg">

表單將通過點擊按鈕提交。請注意，屬性值是通過“ViewBag”定義的。我們傳遞來自控件的按鈕值。稍后，你會明白我為什么這樣做。“oncklick”事件被分配給按鈕。現在我給它的元素賦值“Hidden（隱藏）”。請注意，由于ViewBag，我得到了web報表屬性的值。因此，如果頁面顯示報表設計器，隱藏字段的值將是“true”，否則為“false”。

對于隱藏字段，設置 id="hid" 屬性。多虧了標識符，我們在表單上找到了所需的元素。現在所有的視圖代碼如下所示：

@{
 ViewBag.Title = "Home Page";
}
<div style="float:left">
 @using (Html.BeginForm("ReportExport", "Home"))
 {
 @Html.DropDownList("Type", new List<SelectListItem>()
{
 new SelectListItem(){ Text= "PDF", Value = "pdf"},
 new SelectListItem(){ Text= "CSV", Value = "csv"},
 new SelectListItem(){ Text= "Word", Value = "doc"},
}, "Select export type")
 <input id="pdf" type="submit" value="Export" />
 }
 <div align="left">
 @using (Html.BeginForm("Index", "Home"))
 {
 <table>
 <tr>
 <td>
 @Html.CheckBox("Toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar
 </td>
 <td>
 <input id="dsg" type="submit" value="@ViewBag.Result" onclick="document.getElementById('hid').value='@ViewBag.WebReport.DesignReport.ToString()'"/>
 <input id="hid" type="hidden" name="dsg">
 </td>
 <tr>
 <tr>
 <td>Black Buttons:</td><td> @Html.RadioButton("Radio", "Black Buttons", true, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 <tr>
 <td>Green Buttons:</td><td> @Html.RadioButton("Radio", "Green Buttons", false, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 <tr>
 <td>Blue Buttons:</td><td>@Html.RadioButton("Radio", "Blue Buttons", false, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 <tr>
 <td>Red Buttons:</td><td>@Html.RadioButton("Radio", "Red Buttons", false, new { style = "width: 13px;", @onchange = "this.form.submit()" })</td>
 </tr>
 </table>
 }
 </div>
</div>
 
 @ViewBag.WebReport.GetHtml()

我們來看看控制器。

public ActionResult Index(string toolbar, string radio, string dsg)
 {
 SetReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 ShowToolbar(toolbar);
 ToolbarStyle(radio);
 ViewBag.Result = ShowDesigner(dsg);
 ViewBag.WebReport = webReport;
 return View();
 }
 
 public string ShowDesigner(string dsg)
 {
 if (dsg == "False")
 {
 webReport.DesignReport = true;
 return "Show Report";
 }
 else if (dsg == "True")
 {
 webReport.DesignReport = false;
 return "Show Designer";
 }
 return "Show Designer";
 }

如你所見，另外一個參數被添加到了Index方法中。它的名稱對應于視圖中隱藏元素的名稱。還添加了一行：“ViewBag.Result = ShowDesigner (dsg);”。

其中，我將按鈕的名稱傳遞給視圖。一個新的方法“ShowDesigner”，用來啟用或禁用報表設計器并返回按鈕的名稱。

運行應用程序：

如何使用外部控件來管理Web報表屬性