This guide describes the process of embedding Flexmonster Data Server in a .NET Core application.
Learn more in the following sections:
To reference the Data Server as a DLL, follow the steps below.
If Flexmonster is not yet embedded, set up an empty component in your webpage:
Complete the Integrating Flexmonster guide. Your code should look similar to the following example:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true
});
Complete the Integration with Angular guide. Your code should look similar to the following example:
<fm-pivot [toolbar]="true"> </fm-pivot>
Complete the Integration with React guide. Your code should look similar to the following example:
<FlexmonsterReact.Pivot
toolbar={true}
/>
Complete the Integration with Vue guide. Your code should look similar to the following example:
<Pivot toolbar />
Now it’s time to embed Flexmonster Data Server into your ASP.NET Core project.
Skip this step if you already have an ASP.NET Core project. Otherwise, create a new project:
In the project templates menu, select the ASP.NET Core template:
Then, to simplify the server configuration process, create a project based on the API template:
Flexmonster.DataServer.Core.dll can be installed with NuGet – Visual Studio’s package manager:
Another way to install Flexmonster.DataServer.Core.dll is by running the following command in the console:
dotnet add package Flexmonster.DataServer.Core
Startup.cs is located in the project’s root directory. Add the following line of code to the beginning of the file:
using Flexmonster.DataServer.Core;
In the ConfigureServices() method of the Startup.cs file, add the following line of code:
services.AddFlexmonsterApi();
For Flexmonster.DataServer.Core.dll, it is possible to configure data sources and different data storage options. The most convenient way of setting the Data Server configuration is to use the configuration file.
In the configuration file (e.g., appsettings.json), define the data sources to use. For example:
"DataSources":
[
{
"Type": "json",
"Indexes": {
"index-json": {
"Path": "data.json"
}
}
},
//other data sources
],
To learn more about the available configurations for Flexmonster.DataServer.Core.dll, refer to the DLL configurations guide.
Data storage options include the data refresh time and the cache size limit. The data refresh time defines how often the data is reloaded from a file or a database. The cache size limit is the maximum number of cached server responses for every index specified in the "DataSources" property. You can set the configurations in the configuration file like this:
"DataStorageOptions": {
"DataRefreshTime": 60,
"CacheSizeLimit": 150
}
The data refresh time is set in minutes. If the refresh time is not defined, the data is not reloaded.
If the cache size limit is not specified, the number of cached responses is 100.
The IConfiguration object contains user configurations and is used to pass them to the Data Server. Create a variable with the IConfiguration type and initialize it in the constructor:
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
In the previous steps, we configured the Data Server in the configuration file. To apply this configuration, add the following line of code to the ConfigureServices() method of the Startup.cs file:
services.ConfigureFlexmonsterOptions(Configuration);
Now the ConfigureServices() method of the Startup.cs file should look similar to the following:
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
// other services configurations
services.ConfigureFlexmonsterOptions(Configuration);
services.AddFlexmonsterApi();
// other services configurations
}
The API controller is responsible for handling the requests from Flexmonster Pivot. The implementation of the controller is described in the API controller guide.
After you implement the API controller, add the following lines of code to the ConfigureServices() and Configure() methods:
public void ConfigureServices(IServiceCollection services)
{
// other configurations
services.ConfigureFlexmonsterOptions(Configuration);
services.AddFlexmonsterApi();
services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// other configurations
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}");
});
}
When using the Data Server as a DLL, it is possible to preload data before running the Data Server.
The prepopulatingService.Prepopulate() method is responsible for data preloading. You can use it in the Configure() method:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env,
IPrepopulatingService prepopulatingService)
{
// other configurations
prepopulatingService.Prepopulate();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}");
});
}
Due to the same-origin policy, the browser only allows requests that come from the same origin. Cross-origin resource sharing (CORS) allows web applications to make cross-domain requests.
If the ASP.NET Core server and the client share the same origin, skip this step. Otherwise, CORS must be enabled to allow Flexmonster Pivot to send requests to Flexmonster.DataServer.Core.dll:
public void ConfigureServices(IServiceCollection services)
{
// other configurations
services.ConfigureFlexmonsterOptions(Configuration);
services.AddFlexmonsterApi();
services.AddControllers();
services.AddCors();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env,
IPrepopulatingService prepopulatingService)
{
// other configurations
app.UseCors(builder => {
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});
prepopulatingService.Prepopulate();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}");
});
}
Find out how to enable CORS in ASP.NET Core here.
The ASP.NET Core project can be run either using Visual Studio or the console. To run the project from the console, enter the following command:
dotnet run
On the client side, configure the report as follows:
new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true,
report: {
dataSource: {
type: "api",
url: "http://localhost:5000/api", // replace with your url
index: "index-json"
}
}
});
Note The index must match the name of the index defined in step 6 (e.g., "index_json").
Now Flexmonster.DataServer.Core.dll is configured and ready to connect to Flexmonster Pivot. Open the pivot table in the browser to see the data.
To completely remove the Data Server, you need to delete the Data Server code, configurations, logs, and other related files.
Note The uninstallation is irreversible, so ensure you back up the Data Server configurations.
To remove the Data Server, do the following:
Step 1. Remove traces of the Data Server from your project, which include:
FlexmonsterAPIController.cs).appsettings.json).CustomParser.cs).Step 2. Delete the Flexmonster.DataServer.Core.dll in one of the following ways:
Step 2.1. Right-click the project name and select the Manage NuGet Packages... option:
Step 2.2. Go to the Installed tab, select the Flexmonster.DataServer.Core package, and click Uninstall:
Step 2.1. Open your project folder and run the following command:
dotnet remove package Flexmonster.DataServer.Core
You may be interested in the following articles: