Blazor Server App with .NET 6 and Syncfusion UI Components β Full Course
Learn how to harness the power of the Syncfusion UI components from within a Blazor server application. Weβll also integrate the Microsoft Identity technology into our Blazor application to leverage login, registration, authorization and authentication functionality. Syncfusion provides a UI component suite for building powerful web, desktop, and mobile apps.
βοΈ Gavin Lon created this course. https://www.youtube.com/c/gavinlon
π Free Syncfusion Community License: https://www.syncfusion.com/sales/communitylicense
π» Code for full application: https://github.com/GavinLonDigital/SalesManagementApp
βοΈ Syncfusion Components Integrated into the Sales Management Application βοΈ
π DataGrid: https://blazor.syncfusion.com/documentation/datagrid/getting-started
π Spinner: https://blazor.syncfusion.com/documentation/spinner/getting-started
π ListView: https://blazor.syncfusion.com/documentation/listview/getting-started
π ComboBox: https://blazor.syncfusion.com/documentation/combobox/getting-started
π Toast: https://blazor.syncfusion.com/documentation/toast/getting-started
π Charts: https://blazor.syncfusion.com/documentation/chart/getting-started
π Dashboard Layout: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started
π Diagram: https://blazor.syncfusion.com/documentation/diagram-component/getting-started
π Scheduler: https://blazor.syncfusion.com/documentation/scheduler/getting-started
βοΈ Copy Code from Syncfusion Demo Documentation βοΈ
π Toast: https://blazor.syncfusion.com/demos/toast/types?theme=fluent
π Dashboards – Copy Layout code: https://blazor.syncfusion.com/demos/chart/overview?theme=fluent
π Diagram – Employee Hierarchy: https://blazor.syncfusion.com/demos/diagramcomponent/hierarchical-tree?theme=fluent
π Scheduler: https://blazor.syncfusion.com/demos/scheduler/local-data?theme=fluent
βοΈ Copy Code from GitHub βοΈ
π Copy EmployeeModel class and Employee List Data to wire up to the Syncfusion DataGrid: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/CodeClips/EmployeeData_InMemory.txt
π Add Employee Data: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/CodeClips/SeedEmployeeData.txt
π Add Product Data: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/CodeClips/SeedProductData.txt
π Add Client Data: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/CodeClips/SeedClientData.txt
π Register Employee Details with Identity System: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/CodeClips/SeedIdentityUserAndRoleData.txt
π Copy Chart Code for Sales Managerβs Dashboard from GitHub: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/Pages/SMDashboard.razor
π Download Images (Profile Pictures for Employees and Product Images): https://github.com/GavinLonDigital/SalesManagementApp/tree/main/SalesManagementApp/wwwroot/Images
π SalesOrderReport.cs: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/Entities/SalesOrderReport.cs
π OrderService.cs: https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/Services/OrderService.cs
π Add Logo Image and Styling (to help during the creation of the Sales Management Application): https://github.com/GavinLonDigital/SalesManagementApp/blob/main/SalesManagementApp/Pages/Index.razor
βοΈ Styling the Syncfusion ListView Component βοΈ
π Customizing Templates: https://blazor.syncfusion.com/documentation/listview/customizing-templates
π Css structure: https://blazor.syncfusion.com/documentation/listview/style
βοΈ Software βοΈ
π Visual Studio 2022 for Windows Community edition: https://visualstudio.microsoft.com/vs/
π SQL Server 2019: https://www.microsoft.com/en-us/sql-server/sql-server-downloads
βοΈ Course Contents βοΈ
β¨οΈ (0:00:13) Introduction
β¨οΈ (0:00:49) Course Overview
β¨οΈ (0:10:25) Technologies used to Develop the Sales Management Application
β¨οΈ (0:13:20) Getting Started – Create the Blazor Project through Visual Studio 2022
β¨οΈ (0:15:02) Introduction to the Syncfusion DataGrid Component
β¨οΈ (0:43:39) Create the Database using Ef Core Code First Migrations
β¨οΈ (1:22:02) Integrate the Syncfusion DataGrid Component into the Application
β¨οΈ (3:02:44) Integrate the Syncfusion ListView component into the Sale Management Application
β¨οΈ (4:25:23) Integration of the Syncfusion Charts into the Sales Management Application to Display Sales Order Analytical Data
β¨οΈ (5:11:04) Create Dashboards for Employees
β¨οΈ (6:03:51) Integrate the Syncfusion Diagram into the Sales Management Application
β¨οΈ (6:22:25) Integrate the Syncfusion Scheduler into the Sales Management Application
β¨οΈ (6:52:53) Integrate Microsoft Identity into the Sales Management Application
β¨οΈ (7:40:34) Wrapping up