Skip to content

Latest commit

 

History

History
189 lines (138 loc) · 4.41 KB

README.md

File metadata and controls

189 lines (138 loc) · 4.41 KB
Raw

Blazor

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/

Prerequisites

.NET Core SDK - This includes everything you need to build and run Blazor WebAssembly apps.

Setup

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);
        }
    }
}

Blazor Dev Server + Processors

This repo contains the source files for jQWidgets Blazor framework - "jQWidgets.Blazor"

Prerequisite

Node.js

https://nodejs.org/en/

.NET Core SDK

https://dotnet.microsoft.com/download/dotnet-core

Run Dev Server

cd dev-project
dotnet watch run

Library And API Processor

Builds the "jQWidgets.Blazor" library files and generates the API files

cd processors
node library-and-api

Site Demos Processor

Builds the demos hosted on www.jqwidgets.com

cd processors
node site-demos

Getting Started Demos Processor

Builds the demos needed for the getting started documentation.

cd processors
node getting-started-demos

Nuget Library Update

cd library/jQWidgets.Blazor
Open `jQWidgets.Blazor.csproj` and update `Version` tag
dotnet pack

The build file is located in

library/jQWidgets.Blazor/bin/Debug/jQWidgets.Blazor.[VERSION].nupkg

Either update it manually via nuget official site or via CLI

dotnet nuget push [buildFilePath] -k [APIKey] -s https://api.nuget.org/v3/index.json