如何在knockout.js上的Web应用程序中使用FastReport Online Designer

如何安装knockout模板并创建应用程序

.Net Core SDK可能不包含用于生成knockout应用程序的模板。但它很容易修复。在应用程序所在的文件夹中打开PowerShell命令行。

输入命令：

dotnet newnstall Microsoft.AspNetCore.SpaTemplates::*

之后，您可以按照模板创建应用程序。输入命令：

dotnet new knockout –o KnockOnlineDesigner

转到包含已创建应用程序的文件夹：

cd KnockOnlineDesigner

并执行命令以安装必要的JavaScript库：

npm install

Preparation

现在您可以运行创建的项目。不过它还没有sln文件，首次保存项目时将会添加。由于我们将使用开放的FastReport库，因此我们安装了NuGet套包FastReport.OpenSource、FastReport.OpenSource.Web。

告模板应放在wwwroot文件夹中。创建一个App_Data目录，并为它们添加多个 告模板和数据文件。

此外，在wwwroot中，您需要添加一个包含在线设计器的文件夹。

您可以从客户端部分的开发人员站点下载在线设计器。当然，您需要有已购买的授权。在下载在线设计器之前，您需要构建它。在在线设计器中，您可以在 表设计器中选择所需的组件和控件。请注意，在配置“Configuration”部分中，要选择API以使用.Net Core。

在构建完成后，将构建设计器库，并且有一个下载zip文件的链接。只需解压目录wwwroot中存档的内容即可。

在Startup.cs文件中，我们包含FastReport库：

public void Configure(IApplicationBuilder app, IHostingEnvironment env){…App.UseFastReport();…}

要显示 表设计器，您需要创建Web 表对象并启用设计器模式。我们使用SampleDataController控制器。添加两个方法：显示设计器以及在服务器上保存修改后的 告。

using System;using Microsoft.AspNetCore.Mvc;using FastReport.Web;using Microsoft.AspNetCore.Hosting;using System.IO; namespace KnockOnlineDesigner.Controllers{ [Route("api/[controller]")] public class SampleDataController : Controller { private IHostingEnvironment _env;  public SampleDataController(IHostingEnvironment env) { _env = env; }  [HttpGet("[action]")] public IActionResult Design(string name) { var webRoot = _env.WebRootPath; //wwwroot path WebReport WebReport = new WebReport(); //create web report object WebReport.Width = "1000"; //set the web report width WebReport.Height = "1000"; //set the web report height WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}.frx", name)))); //load report into the WebReport System.Data.DataSet dataSet = new System.Data.DataSet(); //create data source dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); //open xml database WebReport.Report.RegisterData(dataSet, "NorthWind"); //edit data source WebReport.Mode = WebReportMode.Designer; //set the web report mode – designer WebReport.DesignerLocale = "en"; //set report designer localization WebReport.DesignerPath = @"WebReportDesigner/index.html"; //set online designer url WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; //set callback url WebReport.Debug = true; //enable debug mode. ViewBag.WebReport = WebReport; //pass report to view return View(); }  [HttpPost("[action]")] public IActionResult SaveDesignedReport(string reportID, string reportUUID) { var webRoot = _env.WebRootPath; //set the wwwroot path ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); //set message for view Stream reportForSave = Request.Body; //write the post result into the stream string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); //get the path to save reportsusing (FileStream file = new FileStream(pathToSave, FileMode.Create)) //create file stream { reportForSave.CopyTo(file); //save the result into the file } return View(); } }}

请注意，在使用该方法之前，必须根据请求类型设置Get或Post属性的属性。

对于创建的方法，我们添加两个视图：

• Design.chtml:

@await ViewBag.WebReport.Render()

• SaveDesignedReport.chtml:

@ViewBag.Message

knockout.js上的客户端应用程序位于ClientApp文件夹中。

  Edit Report

此模板显示 告的下拉列表、按钮和div元素，其中将插入从后端接收的html代码——the report designer。按下按钮将执行单击的功能。此模板的javascript位于单独的home-page.ts文件中。让我们用代码替换它的内容：

import * as ko from 'knockout'; class HomePageViewModel { public designer = ko.observable(''); public selectedReport = "Image"; public reports = ko.observableArray(["Image", "Hierarchic List", "Matrix"]);  clicked() { if (this.selectedReport != '') { fetch('api/SampleData/Designame=' + this.selectedReport) .then(response => response.text()) .then(data => { this.designer(data); }); } }} export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

在这里，我们添加了一些变量：

• Designer——将根据 表设计器的请求存储从服务器收到的html代码；

• selectedReport——存储在下拉列表中选择的 告的名称；

• reports—— 告名称列表。

此外，还有一个单击的函数，它向服务器执行get请求，并接收加载了html 告的在线设计器。

就是这样，您可以运行我们的演示应用程序了：

绿色框中的已保存消息将通知您成功保存 告。这告诉我们SaveDesignedReport方法按预期工作并将 告保存在App_Data文件夹中。让我们来看看，停止应用程序并查看App_Data文件夹：

如您所见，已添加了另一个 表模板，其名称与我们在SaveDesignedReport方法中指定的名称相同。

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

标签：