如何使用外部控件来管理Web 表属性

所以，我们需要创建一个Web应用程序，它将允许：

1）上传Web 表;

2）以三种格式之一导出表;

3）显示/隐藏表的Web工具栏;

4）自定义工具栏上按钮的样式;

5）在Online Designer上运行表。

我们开工。首先，我们将做一些准备工作，在MVC应用程序中启动一个Web 表。添加对以下库的引用：FastReport和FastReport.Web。

<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”，用来启用或禁用表设计器并返回按钮的名称。

运行应用程序：