本文旨在闡明，在ASP .Net MVC項(xiàng)目中，如何通過(guò)Web表單控件管理報(bào)表。
所以，我們需要?jiǎng)?chuàng)建一個(gè)Web應(yīng)用程序，它將允許：
1）上傳Web報(bào)表;
2）以三種格式之一導(dǎo)出報(bào)表;
3）顯示/隱藏報(bào)表的Web工具欄;
4）自定義工具欄上按鈕的樣式;
5）在Online Designer上運(yùn)行報(bào)表。
我們開(kāi)工。首先，我們將做一些準(zhǔn)備工作，在MVC應(yīng)用程序中啟動(dòng)一個(gè)Web報(bào)表。添加對(duì)以下庫(kù)的引用：FastReport和FastReport.Web。
現(xiàn)在你需要編輯文件夾“Views-> Shared”中的_Layout.cshtml文件。為header添加腳本和樣式：
<head>
@WebReportGlobals.Scripts()
@WebReportGlobals.Styles()
</head>
在視圖文件夾中有一個(gè)Web.config文件，給它添加命名空間：
<namespaces>
<add namespace="FastReport" />
<add namespace="FastReport.Web" />
</namespaces>
在項(xiàng)目的根目錄，還有另一個(gè)Web.config。在其中我們添加一個(gè)處理句柄，緊隨modules部分之后：
<modules>
…
</modules>
<handlers>
<add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
</handlers>
在HomeController中，我們添加報(bào)表的工作邏輯。
在Index方法中，我們將加載報(bào)表并將其發(fā)送到視圖。
public ActionResult Index()
{
SetReport();
webReport.Width = Unit.Percentage(100);
webReport.Height = Unit.Percentage(100);
ViewBag.WebReport = webReport;
return View();
}
我把報(bào)表上傳到一個(gè)單獨(dú)的方法，我們將在下面討論。將web報(bào)表的寬度和高度設(shè)置為100％。使用ViewBag，我們將報(bào)表傳遞給視圖。并返回索引視圖。
為了在不同的方法中使用報(bào)表對(duì)象，我創(chuàng)建了一個(gè)全局變量，一個(gè)WebReport對(duì)象的實(shí)例。
public WebReport webReport = new WebReport();
1）現(xiàn)在考慮下載報(bào)表：
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");
}
指定包含報(bào)表的文件夾的路徑。為了方便起見(jiàn)，我創(chuàng)建了一個(gè)將路徑變量分配給報(bào)表的單獨(dú)方法。接下來(lái)，創(chuàng)建一個(gè)“DataSet”的實(shí)例并加載XML數(shù)據(jù)庫(kù)。然后，我們?cè)趫?bào)表對(duì)象中注冊(cè)數(shù)據(jù)源。最后，將報(bào)表模板加載到WebReport對(duì)象中。
指定包含報(bào)表的文件夾路徑的方法：
private string GetReportPath()
{
return this.Server.MapPath("~/App_Data/");
}
2）在進(jìn)入“視圖”之前，再添加一個(gè)選擇報(bào)表導(dǎo)出的方法：
public void ReportExport(string type)
{
SetReport();
switch (type)
{
case "pdf":
webReport.ExportPdf();
break;
case "csv":
webReport.ExportCsv();
break;
default:
webReport.ExportWord2007();
break;
}
這里我們加載一個(gè)報(bào)表。根據(jù)類型參數(shù)的值，我們執(zhí)行三種類型的導(dǎo)出之一。
現(xiàn)在打開(kāi)“索引”視圖。將包含三個(gè)導(dǎo)出選項(xiàng)的下拉列表添加到表單中：
@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()
這里我們使用了一個(gè)html助手來(lái)創(chuàng)建一個(gè)表單，它指向控制器“Home”和action（method）“ReportExport”。請(qǐng)記住，我們已經(jīng)在控制器中創(chuàng)建了這個(gè)方法。在表單內(nèi)部，我們創(chuàng)建一個(gè)DropDownList控件，并為其填充值。當(dāng)然，你可以創(chuàng)建一個(gè)數(shù)據(jù)模型。但是，鑒于列表只有三個(gè)元素，所以我直接在視圖中填充了它。下拉列表打開(kāi)后，會(huì)出現(xiàn)一個(gè)提交類型的按鈕，它會(huì)在網(wǎng)頁(yè)上刷新。
就像你記得的那樣，ReportExport方法需要一個(gè)類型參數(shù) - 一個(gè)來(lái)自下拉列表的值。根據(jù)所選值，報(bào)表將被導(dǎo)出為適當(dāng)?shù)母袷健?/p>
3）現(xiàn)在實(shí)現(xiàn)報(bào)表工具欄的隱藏。視圖代碼如下所示：：
@using (Html.BeginForm("Index", "Home"))
{
@Html.CheckBox("Toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar
}
和前面的例子一樣，我們創(chuàng)建一個(gè)表單。但是，這一次我們指定了"Index"指令 - 我們?cè)谀抢镲@示報(bào)表。在表單中，我們創(chuàng)建了一個(gè)CheckBox元素。它的值將被傳遞給Index方法。這一次，我決定不添加另一個(gè)按鈕來(lái)更新頁(yè)面，我使用了"onchange"事件，它具有發(fā)送表單“this.form.submit ()”的功能。現(xiàn)在，如果你更改復(fù)選框的值，頁(yè)面將被刷新。
類似于導(dǎo)出報(bào)表，我們需要傳遞一個(gè)參數(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();
}
在該方法中，添加了一個(gè)參數(shù)和條件。根據(jù)工具欄參數(shù)的值，我們可以決定啟用或禁用它。
4）現(xiàn)在讓我們轉(zhuǎn)到控件的創(chuàng)建，借助它我們可以選擇圖標(biāo)樣式。我們將添加四個(gè)更多的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()
為了改善外觀，我把項(xiàng)目放到表單里。。讓我們考慮一下RadioButton組件：
Html.RadioButton("Radio", "Black Buttons", true, new { style = "width: 13px;", @onchange = "this.form.submit()" })
這是控件的名稱 - “Radio”。這是Index操作中另一個(gè)參數(shù)的名稱。下一個(gè)參數(shù) - “Black Buttons”。也就是說(shuō)，工具欄將顯示黑色按鈕。下一個(gè)值表示選定的單選按鈕是否被默認(rèn)標(biāo)記。最后一個(gè)參數(shù)是HtmlAttributes對(duì)象。在這里，你可以為<input type = "radio" />標(biāo)簽指定任何可用的屬性。我利用這一點(diǎn)，指定控件的寬度和“onchange”事件，類似于前面的復(fù)選框元素。
所以，只有四個(gè)單選按鈕 - 工具欄中的四種風(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)在再添加一個(gè)參數(shù) - "radio"。在交換機(jī)設(shè)計(jì)中，我根據(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í)施最后一個(gè)設(shè)想的功能 -在Online Designer中運(yùn)行報(bào)表。值得一提的是，為了顯示它，需要從官網(wǎng)下載“OnlineDesigner”程序集并將其包含在項(xiàng)目中。只需解壓并將整個(gè)WebReportDesigner文件夾添加到項(xiàng)目的根目錄即可。
將按鈕和隱藏的字段添加到前面例子里的表單中：
<input id="dsg" type="submit" value="@ViewBag.Result" onclick="document.getElementById('hid').value='@ViewBag.WebReport.DesignReport.ToString()'"/>
<input id="hid" type="hidden" name="dsg">
表單將通過(guò)點(diǎn)擊按鈕提交。請(qǐng)注意，屬性值是通過(guò)“ViewBag”定義的。我們傳遞來(lái)自控件的按鈕值。稍后，你會(huì)明白我為什么這樣做。“oncklick”事件被分配給按鈕。現(xiàn)在我給它的元素賦值“Hidden（隱藏）”。請(qǐng)注意，由于ViewBag，我得到了web報(bào)表屬性的值。因此，如果頁(yè)面顯示報(bào)表設(shè)計(jì)器，隱藏字段的值將是“true”，否則為“false”。
對(duì)于隱藏字段，設(shè)置 id="hid" 屬性。多虧了標(biāo)識(shí)符，我們?cè)诒韱紊险业搅怂璧脑亍，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()
我們來(lái)看看控制器。
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";
}
如你所見(jiàn)，另外一個(gè)參數(shù)被添加到了Index方法中。它的名稱對(duì)應(yīng)于視圖中隱藏元素的名稱。還添加了一行：“ViewBag.Result = ShowDesigner (dsg);”。
其中，我將按鈕的名稱傳遞給視圖。一個(gè)新的方法“ShowDesigner”，用來(lái)啟用或禁用報(bào)表設(shè)計(jì)器并返回按鈕的名稱。
運(yùn)行應(yīng)用程序：
這是一個(gè)包含三種導(dǎo)出類型的下拉列表：
讓我們禁用工具欄：
現(xiàn)在我們啟用在線報(bào)表設(shè)計(jì)器：
顯示報(bào)表并打開(kāi)工具欄。讓我們?yōu)楣ぞ邫谏系陌粹o選擇一些樣式：
就這樣，我們已經(jīng)創(chuàng)建了外部控件，通過(guò)它我們可以管理ASP .Net MVC應(yīng)用程序中的WebReport對(duì)象的屬性。
產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) | | 聯(lián)系Elyn
推薦閱讀
標(biāo)簽：
報(bào)表專家報(bào)表解決方案報(bào)表.NET報(bào)表控件報(bào)表設(shè)計(jì)Web開(kāi)發(fā)
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
金喜正規(guī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線