Using jQWidgets with ASP .NET Blazor

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.

Prerequisites

  • For legacy browsers support, you may use this polyfill
  • .NET Core 3.0 SDK or later

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.

Create a new Blazor Project

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:

Folder Structure

Now, let's create a new folder libs inside the wwwroot folder. Then, include the jQWidgets library in the project. You could download it from our jqwidgets download. We need to unzip the download package version and get the jqwidgets folder there, which contains the components javascript and CSS files. This folder is our library that we will use in the Blazor project.

Place of jQWidgets

We need to refer the jqwidgets files in the _Host.cshtml file which is placed in the Pages folder.

CSS files:

  • jqx.base.css - it is the main file with styles for the jQWidgets
  • jqx.material.css - is the name of the material theme which we will use
For the purpose of this tutorial, we will use jqxGrid, which is our Data Grid component. The Grid requires these JavaScript files: jqxcore.js, jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxmenu.js, jqxgrid.js, jqxgrid.selection.js, jqxlistbox.js, jqxdropdownlist.js, jqxgrid.pager.js, jqxgrid.columnsresize.js
The references that we include to the _Host.cshtml file are:



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.

Pages Folder Structure

To call into JavaScript from .NET, use the IJSRuntime abstraction. Another thing that we need is a container for our jqxGrid, add these rows:



The approach that is used to invoke the createComponent function from the CreateGrid.js file is: 

JSRuntime.InvokeAsync<object>("createComponent", gridId);

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:

  • https://localhost:5001
  • http://localhost:5000




The Final Result:

Final Result