如何在MVC项目中创建交互式Web 表

首先，我们需要创建一个表。我们将显示产品类别的列表。当你点击某个类别时，将会生成一个包含所选类别产品列表的详细表。

也就是说，基础表其实是一个类别的列表。创建一个表模板。我使用FastReport.Net提供的xml数据库。类别表单：

创建以下模板：

我将Columns>Count属性设置为2。现在数据将分成两列显示，分别是类别名称和图片。

我们的目标是显示该类别的产品的详细清单。所以现在我们创建一个详细表来显示产品列表。

创建一个新的表。在同一个数据库中，选择产品和类别表单。我们将这两个表单链接到CategoryID字段：

并创建一个表模板：

要显示所需类别的产品，你需要对其进行过滤。要做到这一点，我们将使用CategoryID字段。你必须将参数（类别ID）从第一个表传递给第二个表。为此，请创建一个表参数 – 类别。数据类型为字符串。

现在为数据带创建一个过滤器。双击带区并选择“过滤器”选项卡：

在过滤器表达式中，只需检查CategoryID字段与Category参数值的相等性即可。保存表。

现在回到带有类别的第一个表。

要转到详细表，你需要为CategoryName字段创建一个超链接。

这里我们选择之前创建的详细表。接下来，选择我们将要从主表中传递值的类别表参数。最后，我们指定从哪个表达式中获取类别参数的值。该表达式是类别表单中的CategoryID字段。在窗体的底部，启用“更改对象的外观，使其看起来像一个链接”复选框。

就这样，保存表。现在我们有一个带有类别的主表，一个带有产品的详细表。

创建一个ASP.Net MVC项目。

我们将库（FastReport.dll和FastReport.Web.dll）连接到项目。

将表放在主页上。我们将使用HomeController类中的WebReport组件（来自Controllers文件夹）。

添加库：

using FastReport.Web;using System.Web.UI.WebControls;

在Index()方法中，添加以下代码：

public ActionResult Index() { WebReport webReport = new WebReport(); //create instance of WebReport object. string report_path = "J:\Program Files (x86)\FastReports\FastReport.Net\Demos\Reports\"; //reports directory System.Data.DataSet dataSet = new System.Data.DataSet(); //create data set dataSet.ReadXml(report_path + "nwind.xml"); //load xml data base webReport.Report.RegisterData(dataSet, "NorthWind"); //registry data source in the web report webReport.Report.Load(report_path + "Simple Interactive.frx"); //load the report to WebReport ViewBag.WebReport = webReport; //send the report to View return View(); }

我们来看看Index.cshtml视图：

我删除了所有默认的代码，并添加了我自己的代码。它将只显示页面标题和页表：

@{ ViewBag.Title = "Home Page";}@ViewBag.WebReport.GetHtml()

HomeController的Index方法会将表发送到Index视图。

在文件_Layout.cshtml中，你需要连接脚本：

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

现在你需要对两个Web配置进行更改。这些文件的命名是相同的，但它们位于不同的文件夹中。第一个位于Views文件夹中。我们加入：

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

第二个文件位于项目的根目录下。在其中我们添加一个处理句柄：

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

就这样！运行应用程序。

我们带有类别的主表。选择其中任何一个。

它会显示详细表。请注意，工具栏上出现了一个新的选项卡。你可以使用Simple Interactive选项卡切换到主表。

就像这样，我们可以使用Web上流行的在线告，以及桌面应用程序。

产品介绍 | 下载试用 | 优惠活动 | 在线客服 | 联系Elyn

如何在MVC项目中创建交互式Web 表

推荐阅读

发表回复

如何在MVC项目中创建交互式Web 表

推荐阅读

相关推荐

发表回复