如何使用外部控件來管理Web報表屬性
本文旨在闡明，在ASP .Net MVC項目中，如何通過Web表單控件管理報表。
所以，我們需要創(chuàng)建一個Web應(yīng)用程序，它將允許：
1）上傳Web報表;
2）以三種格式之一導(dǎo)出報表;
3）顯示/隱藏報表的Web工具欄;
4）自定義工具欄上按鈕的樣式;
5）在Online Designer上運(yùn)行報表。
我們開工。首先，我們將做一些準(zhǔn)備工作，在MVC應(yīng)用程序中啟動一個Web報表。添加對以下庫的引用：FastReport和FastReport.Web。
現(xiàn)在你需要編輯文件夾“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方法中，我們將加載報表并將其發(fā)送到視圖。
public ActionResult Index()
{
SetReport();
webReport.Width = Unit.Percentage(100);
webReport.Height = Unit.Percentage(100);
ViewBag.WebReport = webReport;
return View();
}
我把報表上傳到一個單獨(dú)的方法，我們將在下面討論。將web報表的寬度和高度設(shè)置為100％。使用ViewBag，我們將報表傳遞給視圖。并返回索引視圖。
為了在不同的方法中使用報表對象，我創(chuàng)建了一個全局變量，一個WebReport對象的實例。
public WebReport webReport = new WebReport();
1）現(xiàn)在考慮下載報表：
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");
}
指定包含報表的文件夾的路徑。為了方便起見，我創(chuàng)建了一個將路徑變量分配給報表的單獨(dú)方法。接下來，創(chuàng)建一個“DataSet”的實例并加載XML數(shù)據(jù)庫。然后，我們在報表對象中注冊數(shù)據(jù)源。最后，將報表模板加載到WebReport對象中。
指定包含報表的文件夾路徑的方法：
private string GetReportPath()
{
return this.Server.MapPath("~/App_Data/");
}
2）在進(jìn)入“視圖”之前，再添加一個選擇報表導(dǎo)出的方法：
public void ReportExport(string type)
{
SetReport();
switch (type)
{
case "pdf":
webReport.ExportPdf();
break;
case "csv":
webReport.ExportCsv();
break;
default:
webReport.ExportWord2007();
break;
}
這里我們加載一個報表。根據(jù)類型參數(shù)的值，我們執(zhí)行三種類型的導(dǎo)出之一。
現(xiàn)在打開“索引”視圖。將包含三個導(dǎo)出選項的下拉列表添加到表單中：
@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助手來創(chuàng)建一個表單，它指向控制器“Home”和action（method）“ReportExport”。請記住，我們已經(jīng)在控制器中創(chuàng)建了這個方法。在表單內(nèi)部，我們創(chuàng)建一個DropDownList控件，并為其填充值。當(dāng)然，你可以創(chuàng)建一個數(shù)據(jù)模型。但是，鑒于列表只有三個元素，所以我直接在視圖中填充了它。下拉列表打開后，會出現(xiàn)一個提交類型的按鈕，它會在網(wǎng)頁上刷新。
就像你記得的那樣，ReportExport方法需要一個類型參數(shù) - 一個來自下拉列表的值。根據(jù)所選值，報表將被導(dǎo)出為適當(dāng)?shù)母袷健?/p>
3）現(xiàn)在實現(xiàn)報表工具欄的隱藏。視圖代碼如下所示：：
@using (Html.BeginForm("Index", "Home"))
{
@Html.CheckBox("Toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar
}
和前面的例子一樣，我們創(chuàng)建一個表單。但是，這一次我們指定了"Index"指令 - 我們在那里顯示報表。在表單中，我們創(chuàng)建了一個CheckBox元素。它的值將被傳遞給Index方法。這一次，我決定不添加另一個按鈕來更新頁面，我使用了"onchange"事件，它具有發(fā)送表單“this.form.submit ()”的功能。現(xiàn)在，如果你更改復(fù)選框的值，頁面將被刷新。
類似于導(dǎo)出報表，我們需要傳遞一個參數(shù)給方法。在這種情況下，要傳遞的是“工具欄”。布爾函數(shù)的字符串將被傳輸。我們繼續(xù)：
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();
}
在該方法中，添加了一個參數(shù)和條件。根據(jù)工具欄參數(shù)的值，我們可以決定啟用或禁用它。
4）現(xiàn)在讓我們轉(zhuǎn)到控件的創(chuàng)建，借助它我們可以選擇圖標(biāo)樣式。我們將添加四個更多的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操作中另一個參數(shù)的名稱。下一個參數(shù) - “Black Buttons”。也就是說，工具欄將顯示黑色按鈕。下一個值表示選定的單選按鈕是否被默認(rèn)標(biāo)記。最后一個參數(shù)是HtmlAttributes對象。在這里，你可以為<input type = "radio" />標(biāo)簽指定任何可用的屬性。我利用這一點，指定控件的寬度和“onchange”事件，類似于前面的復(fù)選框元素。
所以，只有四個單選按鈕 - 工具欄中的四種風(fēng)格的圖標(biāo)。讓我們回到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();
}
現(xiàn)在再添加一個參數(shù) - "radio"。在交換機(jī)設(shè)計中，我根據(jù)radio的值指定了所需的風(fēng)格。我們將參數(shù)“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"也發(fā)生了變化：
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）繼續(xù)實施最后一個設(shè)想的功能 -在Online Designer中運(yùn)行報表。值得一提的是，為了顯示它，需要從官網(wǎng)下載“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”事件被分配給按鈕。現(xiàn)在我給它的元素賦值“Hidden（隱藏）”。請注意，由于ViewBag，我得到了web報表屬性的值。因此，如果頁面顯示報表設(shè)計器，隱藏字段的值將是“true”，否則為“false”。
對于隱藏字段，設(shè)置 id="hid" 屬性。多虧了標(biāo)識符，我們在表單上找到了所需的元素?，F(xiàn)在所有的視圖代碼如下所示：
@{
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";
}
如你所見，另外一個參數(shù)被添加到了Index方法中。它的名稱對應(yīng)于視圖中隱藏元素的名稱。還添加了一行：“ViewBag.Result = ShowDesigner (dsg);”。
其中，我將按鈕的名稱傳遞給視圖。一個新的方法“ShowDesigner”，用來啟用或禁用報表設(shè)計器并返回按鈕的名稱。
運(yùn)行應(yīng)用程序：
這是一個包含三種導(dǎo)出類型的下拉列表：
讓我們禁用工具欄：
現(xiàn)在我們啟用在線報表設(shè)計器：
顯示報表并打開工具欄。讓我們?yōu)楣ぞ邫谏系陌粹o選擇一些樣式：
就這樣，我們已經(jīng)創(chuàng)建了外部控件，通過它我們可以管理ASP .Net MVC應(yīng)用程序中的WebReport對象的屬性。
產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動 | 在線客服 | 聯(lián)系Elyn
推薦閱讀
- FastReport VCL報表控件開發(fā)者手冊
- FastReport Online Designer中文手冊
- Fastreport.Net教程2016
- Fastreport.Net用戶手冊
- FastReport.Net教程2017（持續(xù)更新中···）
- FastReport Online Designer教程2017（持續(xù)更新中···）
- 報表教程2017（持續(xù)更新中···）
- FastReport.Net v2018.1版本更新已經(jīng)發(fā)布！
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務(wù)
客服熱線