Blazor is a next-generation single-page application (SPA) provided by Microsoft ASP.Net Core 3.0 framework. There are two options to create it: Server-side (Blazor Server) or client-side (Blazor WebAssembly). In this page we will demonstrate how to integrate the jqxGrid with the first approach. One of the benefits of this choice is the wider support range.
Blazor is a client-side hosting model for Razor Components. The component class is usually written in the form of a Razor markup page with a .razor file extension. The components can be nested and reused. More details can be found on the official site.
In the next step, we will start with the scaffold of the project.
Note: .NET Core 3.0 requires Visual Studio 2019 16.3 or later.
You should choose the destination folder (or create a new folder) where you want to create this project. Navigate to this folder from the terminal.
If you already installed the newer version of the ASP.Net Core 3.0 then we can continue. You need to type this in the terminal:
dotnet new blazorserver -n WebApp
This will generate a new Blazor Server application with the name WebApp.
More details and for other commands you could type this
dotnet --help in the terminal.
The folder structure should look like this below:
We need to refer the jqwidgets files in the _Host.cshtml file which is placed in the Pages folder.
Now, lets create a file CreateGrid.js. Navigate to the wwwroot folder and create the CreateGrid.js file on the same level. We will use it for initialization of the jqxGrid. Add there the following content:
You could see that we create a createComponent function in the CreateGrid.js file. A little bit later we will demonstrate how to invoke this in C# code. We could create a new Razor file or in our case we will use one of the default .razor files. Navigate back to the Pages folder and open the Index.razor file.
The approach that is used to invoke the createComponent function from the CreateGrid.js file is:
For the final result of the Index.razor file you could use the code below:
We need to navigate to the folder of our WebApp project from the terminal and then we can run the project via
dotnet run command it shows two available options:
The Final Result: