How to use Online Designer with FastReport Open Source in ASP .NET Core Vue.js application

In this article, we will look at the way to display the online report designer in a one-page application written in the Vue.js framework with a backend on ASP .Net Core.

To create an application on the framework Vue.js you need to install:

• Node.js;
• N et core 2.0 sdk (and higher) or Visual Studio 2017.

Now we will create a folder for the future project and call the PowerShell window in it. As you probably know, to do this you need to hold down the shift key and right-click on the free space in the folder. In the context menu, select the item - “Open the PowerShell window here.” Now we need to set the vue template in dotnet. To do this, run the command in the PowerShell window:

dotnet new — install Microsoft.AspNetCore.SpaTemplates::*

And let’s create an application with the command:

dotnet new vue -o FROSVueOnlineDesigner

As a result, we will get a fully working project in the current folder. Run the project file.

By this time, you should already have an online designer itself. Let me remind you that you can download it in the client section on the website www.fast-report.com . A designer configurator is available for you. In it you select various options. But note that in the “Configuration” section you should select FastReport.Web for Core.

After building the designer, you download it as an archive. Extract the archive to the wwwroot folder in your project.

Also, in wwwroot you need to add a folder with a report template and a database for it:

To work with FastReport Opensource, you need to install packages in NuGet. Open the NuGet package manager, select the package source nuget.org, enter FastReport.OpenSource in the search bar and install the packages FastReport.OpenSource and FastReport.OpenSource.Web.

Next, you need to connect FastReport in the configuration. Add just one line of code to the Startup.cs file:

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)

        {

…

            app.UseFastReport();

             …

        }

There are already two controllers in the project. Let's use one of them - SampleDataController.cs. Add in it two web methods Design and SaveDesignedReport:

using System;

using System.Collections.Generic;

using System.Linq;

using Microsoft.AspNetCore.Mvc;

using FastReport.Web;

using System.IO;

using Microsoft.AspNetCore.Hosting;

public class SampleDataController : Controller

    {

        private IHostingEnvironment _env;

        public SampleDataController(IHostingEnvironment env)

        {

            _env = env;

        }

        [HttpGet("[action]")]

        public IActionResult Design(string name)

        {

            var webRoot = _env.WebRootPath;

            WebReport WebReport = new WebReport();

            WebReport.Width = "1000";

            WebReport.Height = "1000";

            if (name != "Blank")

                WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}.frx", name)))); 

            System.Data.DataSet dataSet = new System.Data.DataSet();

            dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); 

            WebReport.Report.RegisterData(dataSet, "NorthWind");

            WebReport.Mode = WebReportMode.Designer;

            WebReport.DesignerLocale = "en";

            WebReport.DesignerPath = @"WebReportDesigner/index.html";

            WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport";

            WebReport.Debug = true;

            ViewBag.WebReport = WebReport;

            return View();

        }

        [HttpPost("[action]")]

        public IActionResult SaveDesignedReport(string reportID, string reportUUID)

        {

            var webRoot = _env.WebRootPath;

            ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID);

            Stream reportForSave = Request.Body;

            string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx");

            using (FileStream file = new FileStream(pathToSave, FileMode.Create))

            {

                reportForSave.CopyTo(file);

            }

            return View();

        }

}

At first we added a class constructor and passed a variable of type IHostingEnvironment to it to get the path to the wwwroot folder. In the Design method, we create a web report object, load the report template into it, connect the data source, set the design mode. Also, set the path to the report designer and the web method for the report save callback.

The SaveDesignedReport method is responsible for saving the report when you click the Save button in the online designer. The method saves the modified report template to a file on the server.

For each of the methods discussed, you need to create a view in the Views folder. Add another SampleData folder to it. Go back to SampleDataController.cs. Right-click on the design method signature and select Add view. In the window that appears, click OK.

The created view will open for editing. Simply replace its contents with:

@await ViewBag.WebReport.Render()

For the SaveDesignedReport method, let's also create a view. And replace its contents with:

@ViewBag.Message

As a result, we have the following file structure in the Views folder:

We now turn to the implementation of the client side. The SPA application is located in the ClientApp folder. The components folder contains components. They are a bunch of script and template. Therefore, these files are located in separate folders. Create your own new folder designer. Add the template for the designer.vue.html file and the designer.ts script to it:

Add the following code to the template file:

<template>

    <div v-html="designer">

    </div>

</template>

<script src="./designer.ts"></script>

The pattern is extremely simple. We simply output the contents of the designer variable inside the div.

In the last line, we define the designer.ts script. We implement it:

import Vue from 'vue';

import { Component } from 'vue-property-decorator';

@Component

export default class DesignerComponent extends Vue {

    designer: string = '';

    mounted() {

        fetch('api/SampleData/Design?name=Master-Detail')

            .then(response => response.text())

            .then(data => {

                this.designer = data;

            });

    }

}

In this component, we make a get request to the Design method, which is located in the SampleDataController controller. The resulting representation after the method call we write to the designer variable.

We created the component, but now we need to register it in the boot.ts which is the component download script:

…

const routes = [

    { path: '/', component: require('./components/home/home.vue.html') },

    { path: '/counter', component: require('./components/counter/counter.vue.html') },

    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },

    { path: '/designer', component: require('./components/designer/designer.vue.html') }

];

…

And add navmenu.vue.html to the menu:

…

<div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

…

                    <li>

                        <router-link to="/designer">

                            <span class="glyphicon glyphicon-th-list"></span> Designer

                        </router-link>

                    </li>

                </ul>

            </div>

…

It's time to start the application. Select the menu item Designer:

An online designer with an open report template was displayed to us. Suppose we edited it and want to save. Go to the Report tab and click the Save button:

On the right, we saw the pop-up message saved in a green frame. This means that the report was saved successfully. Let's check it out:

Another file appeared in the App_Data folder - TestReport.frx. Our goal has been achieved - we have displayed the online report designer in a one-page application based on Vue.js, and also saved the edited report to the server.