Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.
Please refer to: https://www.htmlelements.com/blazor/
.NET Core SDK - This includes everything you need to build and run Blazor WebAssembly apps.
I. Install templates:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19465.2 II. Create a blazor application:
dotnet new blazorwasm -o jqwidgets-blazor-app
III. Navigate to the application:
cd jqwidgets-blazor-app
IV. Add the jQWidgets.Blazor package:
dotnet add package jQWidgets.Blazor
V. Open _Imports.razor and add the following at the bottom:
@using jQWidgets.Blazor.Components
VI. Open wwwroot/index.html and add the needed styles and scripts. For example if you are going to use JqxBarGauge, the file should look like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>jqwidgets-blazor-app</title> <base href="/" /> <link href="_content/jQWidgets.Blazor/jqwidgets/styles/jqx.base.css"> </head> <body> <app>Loading...</app> <script src="_content/jQWidgets.Blazor/jqwidgets/jqxcore.js"></script> <script src="_content/jQWidgets.Blazor/jqwidgets/jqxdraw.js"></script> <script src="_content/jQWidgets.Blazor/jqwidgets/jqxbargauge.js"></script> <script src="_content/jQWidgets.Blazor/jqxBlazor.js"></script> <script src="_framework/blazor.webassembly.js"></script> </body> </html> VII. Open Pages/Index.razor and replace the code as follows:
<JqxBarGauge width=600 height=600 colorScheme="scheme02" max="max" values="values" tooltip="tooltip"> </JqxBarGauge> @code { private int max = 150; private double[] values = new double[4] { 102, 115, 130, 137 }; private IDictionary<string, bool> tooltip = new Dictionary<string, bool>() { { "visible", true } }; } VIII. Start the app and check the result:
dotnet watch run Events Methods & Properties I. Events Below is an example of listening to the JqxBarGauge onDrawEnd event and then doing something with the result:
<JqxBarGauge onDrawEnd="onDrawEnd" width=600 height=600 values="values"> </JqxBarGauge> @code { private double[] values = new double[4] { 102, 115, 130, 137 }; private void onDrawEnd(IDictionary<string, object> e) { @* Do Something... *@ } } II. Methods & Properties In order to use methods, first you need to make a reference to the component:
<JqxBarGauge @ref="myBarGauge" width="350" height="350" values="values"> </JqxBarGauge> @code { JqxBarGauge myBarGauge; private double[] values = new double[4] { 102, 115, 130, 137 }; protected override void OnAfterRender(bool firstRender) { if (firstRender) { double[] newValues = new double[4] { 10, 20, 30, 40 }; myBarGauge.val(newValues); } } } https://nodejs.org/en/https://dotnet.microsoft.com/download/dotnet-corecd dev-projectdotnet watch runcd processors node library-and-apiBuilds the demos hosted on www.jqwidgets.com
cd processors node site-demoscd processors node getting-started-demoscd library/jQWidgets.Blazor Open `jQWidgets.Blazor.csproj` and update `Version` tag dotnet packlibrary/jQWidgets.Blazor/bin/Debug/jQWidgets.Blazor.[VERSION].nupkgdotnet nuget push [buildFilePath] -k [APIKey] -s https://api.nuget.org/v3/index.json