Simple report app with Blazor in 10 minutes

As of late, I had an assignment to begin working with another system - Blazor. This is the first occasion when I have managed it, so for a beginning I chose to look for some extra data on it on certain sites.

One of the basic components of Blazor, which most designers have referenced, is the capacity to utilize both C# and different JavaScript libraries while making an application. Thusly, I was exceptionally paid off that the entire mix measure is straightforward and even paces up the work on the task since it adds greater portability.

№1. Create the simplest Blazor app

So to create the base, you just need to run one command in the terminal (could it be even easier?):

dotnet new blazorserver -o BlazorApp --no-https

You will see a new folder BlazorApp with all the files needed in your current location, and on http://localhost:5000, you will find the basic Blazor app template.

№2. Add the Flexmonster Pivot to your app

Instead of “ Welcome to your new app“ our task is to add a pivot grid to the main page.

To do this install the Flexmonster.Blazor package:

dotnet add package Flexmonster.Blazor

Add it to the project by writing the following line in the import file (_Imports.razor):

@using Flexmonster.Blazor

Add the script to the main HTML file (_Host.cshtml) so it looks like this:

<head>

</head>

And finally, let's add the table itself to the main page. In Index.razor file, replace the header and caption with the Flexmonster Pivot Grid caption and the component itself with the parameters you need (enable the Toolbar and define width and height of the pivot):

@page "/"

<h1>Flexmonster Pivot Grid</h1>

<FlexmonsterComponent Report="@report"

Toolbar="true"

Width="100%"

Height="600">

</FlexmonsterComponent>

@code {

string report = "https://cdn.flexmonster.com/reports/report.json";

}

In the @code block, we specify the path to the report displayed on the page and pass it to the component as a variable.

№3. Run your Blazor report app