Back to Browse

EP01 (New Ver.) - BlazorChartJS - Server-side (.Net Core 3.1), ChartJS & SQL Server Overview / Demo

3.2K views
Oct 28, 2020
13:37

Note: We've enhanced this version of the BlazorChartJS Overview to provide a richer experience for you. Enjoy and thank you for your support! Don't forget to subscribe and share. --- This is an Overview and Demo of a Blazor Server-side app referencing ChartJS. The DB used is SQL Server 2019. Travis L. Holt discusses the application's details as follows: • Blazor Server-side app built in .Net Core 3.1 named: BlazorChartJS. • 2 Blazor Components with Content Management Insert, Select, Update and Delete DB operations that update Chart data real-time from a SQL DB. • The configurable Blazor component (with Admin on or off) with ChartJS will extract data from the DB and display 7 types of charts simply using a drop-down. Chart component also displays colors with Hex Colors or RGBA Colors allowing transparent chart elements. Color transparency levels are configurable by the user via the Content Management features referenced above. • Services like the main service named CityService is instantiated for solution wide Dependency Injection is initiated in the Startup.cs • Connection to a SQL Server DB using Entity Framework (EF) Core. • References to the Chart.js JavaScript Framework from the _Host.cshtml Free Software Downloads from Microsoft.com: • VS Community 2019: https://visualstudio.microsoft.com/downloads/ • SQL Server 2019: https://www.microsoft.com/en-us/sql-server/sql-server-downloads Complete BlazorChartJS Playlist - Blazor Server-side, Chart.js, C#, .NET Core & SQL Server: https://www.youtube.com/playlist?list=PL18sVs24YATWxCkJYlxSPZJxr3yYyP5Pi Source code: Coming soon on GitHub. Don't forget to ... SUBSCRIBE • LIKE • SHARE • FOLLOW • COMMENT Chapters: 00:00 ... Intro, Title & Outline 00:31 ... Show City_Chart Home Page with Component 00:33 ... Display Charts with HexColors using Dropdowns 03:11 ... Display Charts with RGBA Colors using Dropdowns 03:20 ... Point Out Spelling Error and Population 04:20 ... Show Grid Component with Edit Controls 05:16 ... Load Detail Form Component 05:23 ... Edit City Population and Change Opacity 06:29 ... Review Changes in Grid Component 06:56 ... Add City with Empty Grid Grow 08:32 ... Delete City with Grid's Delete Button 08:48 ... Review Changes in Grid Component 09:22 ... Show City_Chart Razor Component Code on Home Page 10:32 ... Show City_Edit Razor Component Code 11:12 ... Show Chart.js Javascript code in Site.js 11:40 ... Show Startup.cs, AppDbContext, Data Service & SQL Server DB reference 12:26 ... Show SQL Server DB with Cities Table 13:18 ... Next Video Banner and Outro Happy coding and thank you! - Travis

Download

0 formats

No download links available.

EP01 (New Ver.) - BlazorChartJS - Server-side (.Net Core 3.1), ChartJS & SQL Server Overview / Demo | NatokHD