FastReport使用交流,FastReport中国社区FastReport联系电话 联系电话:023-68661681

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

来源:   发布时间:2019-07-15   浏览:336次

在本文中,我们将介绍在ASP.Net Core MVC上快速创建演示应用程序的方法,其中客户端部分采用knockout.js库中编写的单页应用程序的形式。

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

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

输入命令:

dotnet new — install 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目录,并为它们添加多个报告模板和数据文件。

DesignerKnockout1.png

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

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

DesignerKnockout2.png

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

在Startup.cs文件中,我们包含FastReport库:

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

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

 

编辑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 reports
using (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

DesignerKnockout3.png

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

在此文件夹中有一个组件目录,其中包含页面和菜单。让我们编辑主页模板的文件home-page.html:

  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/Design?name=' + 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报告的在线设计器。

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

DesignerKnockout4.png

首先,我们会看到一个空白页面,其中包含报告下拉列表和编辑报告“Edit Report”按钮。从列表中选择一个报告,然后单击按钮。稍后我们将看到在线设计器:

DesignerKnockout5.png

现在,您可以编辑报告模板并进行保存。在报表“Report”选项卡上,单击保存“Save”按钮。

DesignerKnockout6.png

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

DesignerKnockout7.png

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




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

本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:FastReport控件中文网 [http://www.fastreportcn.com/]
本文地址:http://www.fastreportcn.com/post/2365.html

联系我们
  • 重庆总部 023-68661681 400-700-1020
  • 北京公司 010-56705895
购买
  • sales@evget.com
合作
  • business@evget.com