DEV Community: Benjamin Fadina

Building a Shapes Learning Exercise in Blazor with Radzen Components

Benjamin Fadina — Thu, 09 Oct 2025 09:02:55 +0000

🎓 Build an Interactive Shapes Learning Exercise with Blazor WebAssembly & Radzen Components
Welcome to this comprehensive youtube tutorial where we'll build a fully functional Shapes Learning Exercise application using Blazor WebAssembly, Radzen Blazor Components, and Microsoft SQL Server!
🎯 What You'll Learn
In this tutorial, you'll discover how to create an engaging educational application that allows students to:

✅ Identify geometric shapes through interactive visual exercises
✅ Submit answers and receive instant feedback
✅ Track their progress with score history
✅ See their best performance highlighted with alerts and badges

🛠️ Technologies Covered

Blazor WebAssembly - Microsoft's client-side web framework
Radzen Blazor Components - Professional-grade UI components
Microsoft SQL Server - Database for storing student data and results
SVG Graphics - Dynamically generated vector graphics
Authentication & Authorization - Securing pages with [Authorize] attribute

📚 Key Features

Dynamic Shape Rendering - 18 different geometric shapes using SVG
User Input Validation - Case-insensitive answer checking
Score Tracking System - Store and retrieve student results
High Score Display - Show best performance with percentages
Responsive Grid Layout - Works on desktop, tablet, and mobile
Visual Feedback - Color-coded results (green/red borders)
Notification System - Celebrate new high scores

📥 GitHub Resources
Starting Database Schema:
👉 https://github.com/benjaminsqlserver/LearningAppStartingDB
Final Database Schema:
👉 https://github.com/benjaminsqlserver/LearningAppDB
Complete Source Code:
👉 https://github.com/benjaminsqlserver/LearningApp
🎨 Radzen Components Used
RadzenCard, RadzenText, RadzenAlert, RadzenTextBox, RadzenButton, RadzenBadge, RadzenRow, RadzenColumn, RadzenStack
🎬 Perfect For

C# developers learning Blazor WebAssembly
Educators building interactive learning applications
Developers exploring Radzen Blazor components
Teams implementing score tracking systems

🔔 Don't Forget To
👍 Like | 💬 Comment | 🔔 Subscribe | 📤 Share

BlazorWebAssembly #Blazor #CSharp #RadzenBlazor #SQLServer #WebDevelopment #DotNet #EducationalAppRetry

LESSON 6: CREATION OF ALL LAYERS OF COURSE MANAGEMENT MICROSERVICE USING WRAPT

Benjamin Fadina — Tue, 23 Jul 2024 10:50:59 +0000

Source code can be found at https://github.com/benjaminsqlserver/AddCourseMgtMicroservice
Steps

We are going to start by creating a yaml file to describe the Course Management Microservice.
I am going to save the yaml file for the Course Management Microservice in the same folder where I saved the yaml file for the Student Management Microservice
I am now going to get the full object name of the yaml file for Course Management Microservice. I will copy the full object name.
I will now paste that full object name into an empty Sublime Text file.
I will add the craftsman add bc command
I will now open the folder where the Visual Studio solution file is. I will run the command I formulated in step 5 there.
I will now open the updated Visual Studio Solution.
I will now go to Solution Explorer
I will set CourseManagement as startup project in Solution Explorer
I will now update database connection string in appsetting.development.json file of CourseManagement Microservice to point to the default instance of SQL SERVER on my PC.
I will now open Package Manager Console
Please ensure your default project is set to Course Management in Package Manager Console
Type the command Add-Migration GenerateDb and press Enter.
Let us take some time to examine generated migration file.
Let us now update the database
Let us run the Course Management Microservice for the first time
Thank you for watching.

LESSON 5: CREATION OF ALL LAYERS OF STUDENT MANAGEMENT MICROSERVICE USING WRAPT

Benjamin Fadina — Sat, 20 Jul 2024 05:28:17 +0000

In this video, I create all layers of StudentManagement Microservice using wrapt.
YAML FILE:
DomainName: UniversityAdministrationPortal
BoundedContexts:

ProjectName: StudentManagement Port: 5001 DbContext: ContextName: StudentManagementDbContext DatabaseName: StudentManagement Provider: sqlserver Entities:
- Name: Student Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: MatriculationNumber Type: string
  - Name: FirstName Type: string
  - Name: LastName Type: string
  - Name: DateOfBirth Type: DateTime
  - Name: GenderId Type: guid
  - Name: Email Type: string
  - Name: PhoneNumber Type: string
  - Name: StudentContactInformations Relationship: 1tomany ForeignEntityName: StudentContactInformation ForeignEntityPlural: StudentContactInformations
  - Name: StudentNextOfKins Relationship: 1tomany ForeignEntityName: StudentNextOfKin ForeignEntityPlural: StudentNextOfKins
- Name: StudentContactInformation Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: HouseAddress Type: string
  - Name: City Type: string
  - Name: State Type: string
  - Name: ZipCode Type: string
  - Name: CountryID Type: guid
  - Name: StudentID Type: guid
- Name: StudentNextOfKin Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: FirstName Type: string
  - Name: LastName Type: string
  - Name: DateOfBirth Type: DateTime
  - Name: GenderId Type: guid
  - Name: Email Type: string
  - Name: PhoneNumber Type: string
  - Name: StudentID Type: guid
  - Name: RelationshipID Type: guid
  - Name: NextOfKinContactInformations Relationship: 1tomany ForeignEntityName: NextOfKinContactInformation ForeignEntityPlural: NextOfKinContactInformations
- Name: NextOfKinContactInformation Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: HouseAddress Type: string
  - Name: City Type: string
  - Name: State Type: string
  - Name: ZipCode Type: string
  - Name: CountryID Type: guid
  - Name: NextOfKinID Type: guid
- Name: Gender Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: GenderName Type: string
  - Name: Students Relationship: 1tomany ForeignEntityName: Student ForeignEntityPlural: Students
  - Name: StudentNextOfKins Relationship: 1tomany ForeignEntityName: StudentNextOfKin ForeignEntityPlural: StudentNextOfKins
- Name: Country Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: CountryName Type: string
  - Name: StudentContactInformations Relationship: 1tomany ForeignEntityName: StudentContactInformation ForeignEntityPlural: StudentContactInformations
  - Name: NextOfKinContactInformations Relationship: 1tomany ForeignEntityName: NextOfKinContactInformation ForeignEntityPlural: NextOfKinContactInformations
- Name: Relationship Features:
  - Type: AddRecord
  - Type: GetRecord
  - Type: GetList
  - Type: UpdateRecord
  - Type: DeleteRecord Properties:
  - Name: RelationshipName Type: string
  - Name: StudentNextOfKins Relationship: 1tomany ForeignEntityName: StudentNextOfKin ForeignEntityPlural: StudentNextOfKins Source code for this lesson can be found at https://github.com/benjaminsqlserver/StudentManagementMicroservice

Lesson 2: Identifying Microservices for University Administration Portal

Benjamin Fadina — Sat, 20 Jul 2024 05:26:02 +0000

Lesson 2: Identifying Microservices for University Administration Portal

Introduction
This lesson delves into the microservices necessary for a university administration portal. Unlike monolithic architectures, microservices break applications into smaller, independent services that can be developed, deployed, and scaled independently.

Student Management Microservice
Overview: Central to the portal, managing student information from enrollment to academic records.
Key Features:
- Student Information Management
- Enrollment Management
- Academic Records
- Notifications
Data Model: Includes entities such as Student, Enrollment, Course, Grade, and Notification.
Integration Points: Interfaces with Course Management, Examination and Grading, and Financial Management Microservices.
Course Management Microservice
Overview: Manages the creation, scheduling, and management of courses.
Key Features:
- Course Creation and Management
- Scheduling
- Enrollment Management
- Resource Allocation
Data Model: Key entities include Course, Schedule, Instructor, Classroom, and Enrollment.
Integration Points: Works with Student Management, Faculty Management, and Communication Microservices.
Faculty Management Microservice
Overview: Handles information related to faculty members.
Key Features:
- Faculty Information Management
- Assignment Management
- Schedule Management
- Performance Tracking
Data Model: Entities include Faculty, Course Assignment, Schedule, and Evaluation.
Integration Points: Connects with Course Management, Examination and Grading, and Communication Microservices.
Examination and Grading Microservice
Overview: Manages examination schedules, grade recording, and transcript generation.
Key Features:
- Exam Scheduling
- Grade Management
- Transcript Generation
- Notifications
Data Model: Entities include Exam, Grade, Transcript, and Notification.
Integration Points: Integrates with Student Management, Faculty Management, and Communication Microservices.
Financial Management Microservice
Overview: Manages financial transactions, including tuition payments and scholarships.
Key Features:
- Payment Processing
- Scholarship Management
- Financial Records
- Billing and Invoicing
Data Model: Entities include Payment, Scholarship, Financial Record, and Invoice.
Integration Points: Links with Student Management and Communication Microservices.
Communication Microservice
Overview: Manages announcements and messaging within the university.
Key Features:
- Announcements
- Messaging
- Notifications
- Feedback and Surveys
Data Model: Entities include Announcement, Message, Notification, and Survey.
Integration Points: Integrates with all other microservices.
Authentication and Authorization Microservice
Overview: Manages user authentication and role-based access control.
Key Features:
- User Authentication
- Role Management
- Access Control
- Audit Logs
Data Model: Entities include User, Role, Permission, and Audit Log.
Integration Points: Interfaces with all other microservices for secure access control.

Conclusion
The lesson outlines essential microservices for a university administration portal, each designed for specific functions to ensure efficient management. Adopting a microservices architecture enhances scalability, flexibility, and maintainability in university operations.

Lesson 1: Introduction to University Administration Portal

Benjamin Fadina — Sat, 20 Jul 2024 05:23:04 +0000

Lesson 1: Introduction to University Administration Portal

Table of Contents

Overview
Importance of University Administration Portals
Technologies Used
Understanding ASP.NET Web API
Introduction to Microservices
Overview of Blazor
Using Radzen Blazor Components

Overview
University administration portals streamline administrative tasks, enhance communication, and provide seamless access to information for students, faculty, and staff. In this Lesson, we'll explore the significance of these portals, the technologies we'll be using, and how they integrate to create an efficient system.

Importance of University Administration Portals
University administration portals serve as a centralized platform to manage various administrative functions. They provide:

Efficiency: Automating administrative tasks reduces manual effort and errors.
Accessibility: Easy access to information for students, faculty, and staff.
Communication: Enhanced communication channels between different stakeholders.
Data Management: Centralized data management ensures data consistency and integrity.

Technologies Used
This Lesson will guide you through building a university administration portal using the following technologies:

ASP.NET Web API: For creating robust and scalable backend services.
Microservices Architecture: For breaking down the application into smaller, independently deployable services.
Blazor: For building interactive web UIs using C# instead of JavaScript.
Radzen Blazor Components: For rapid application development using pre-built Blazor components.

Understanding ASP.NET Web API
ASP.NET Web API is a framework for building HTTP services that can be consumed by various clients, including browsers and mobile devices. It is built on top of the .NET framework and provides a simple way to create RESTful services.

Key Features

Scalability: Supports the creation of scalable services.
Flexibility: Can be consumed by different types of clients.
Interoperability: Easily integrates with other technologies and platforms.

Introduction to Microservices
Microservices architecture is a design pattern that structures an application as a collection of loosely coupled services. Each service is responsible for a specific business functionality and can be developed, deployed, and scaled independently.

Benefits

Scalability: Each service can be scaled independently based on demand.
Flexibility: Allows using different technologies best suited for each service.
Resilience: Failure in one service does not affect the entire system.

Overview of Blazor
Blazor is a framework for building interactive web applications using C#. It allows developers to create rich web UIs using .NET and run them in the browser using WebAssembly.

Key Features

Component-based Architecture: Build UIs as a collection of reusable components.
Server-side and Client-side Hosting Models: Supports both server-side and client-side hosting.
Full-stack Development: Use C# for both client and server code.

Using Radzen Blazor Components
Radzen Blazor Components is a library of UI components for Blazor. It provides pre-built components that help in rapid application development.

Key Features

Rich Set of Components: Includes components for forms, data presentation, navigation, and more.
Customization: Highly customizable to fit various design requirements.
Integration: Seamlessly integrates with Blazor applications.

Conclusion
This Lesson provided an overview of the technologies and concepts that will be used to build a university administration portal. In the following Lessons, we will dive deeper into each technology and guide you through the development process step-by-step.

Migrating MySQL database to SQL Server Using Radzen Blazor Studio.

Benjamin Fadina — Wed, 10 Apr 2024 14:25:07 +0000

Source code can be pulled from https://github.com/benjaminsqlserver/MigratingMySQLToSQLServerUsingRadzenBlazorStudio

Video Steps:-

Connection is made to MySQL.
Database ProductCatalogue is created with 2 tables ProductCategory and Products. A one to many relationship is also created between the 2 tables. Dummy data is also inserted into the 2 tables.
A Radzen Blazor app is then created which connects to the MySQL database.
The data in the two tables are then backed up as csv files via the Radzen app.
A copy of the app is then pasted into the Converter folder where it is opened with Visual Studio.
MySql related packages are then removed from the copy.
Sql Server related packages as well as Microsoft.Entityframeworkcore.Tools packages are then added.
The class BlankTriggerAddingConvention is removed from the Data folder and references to it are also removed from ConDataContext class.
The appsettings.json and appsettings.development.json files are also updated to point to an instance of SQL Server.
Program.cs file is also modified so that ConDataContext is initialized using SQLServer instead of Mysql. 11.Migrations for SQL SERVER are then generated using Package Manager Console.
The database is then generated in SQL SERVER using update-database command 13.The converted app is then run.
Data in the csv files are imported into SQL SERVER

The script used to create the initial MySQL database is as follows:-

-- Create the ProductCatalogue database
CREATE DATABASE IF NOT EXISTS ProductCatalogue;

-- Switch to the ProductCatalogue database
USE ProductCatalogue;

-- Create the ProductCategory table
CREATE TABLE IF NOT EXISTS ProductCategory (
category_id INT AUTO_INCREMENT PRIMARY KEY,
category_name VARCHAR(50) NOT NULL
);

-- Create the Product table
CREATE TABLE IF NOT EXISTS Product (
product_id INT AUTO_INCREMENT PRIMARY KEY,
product_name VARCHAR(100) NOT NULL,
price DECIMAL(10, 2) NOT NULL,
category_id INT,
FOREIGN KEY (category_id) REFERENCES ProductCategory(category_id)
);

-- Insert sample data into ProductCategory table
INSERT INTO ProductCategory (category_name) VALUES
('Electronics'),
('Clothing'),
('Books'),
('Home & Kitchen'),
('Toys');

-- Insert sample data into Product table
INSERT INTO Product (product_name, price, category_id) VALUES
('Smartphone', 599.99, 1),
('Laptop', 999.99, 1),
('T-Shirt', 19.99, 2),
('Jeans', 39.99, 2),
('Python Programming for Beginners', 29.99, 3),
('The Great Gatsby', 9.99, 3),
('Coffee Maker', 49.99, 4),
('Blender', 39.99, 4),
('LEGO Set', 59.99, 5),
('Doll', 24.99, 5),
('Tablet', 299.99, 1),
('Headphones', 79.99, 1),
('Dress', 29.99, 2),
('Sneakers', 49.99, 2),
('Data Science Handbook', 49.99, 3),
('Cookbook', 19.99, 3),
('Microwave', 99.99, 4),
('Toaster', 29.99, 4),
('Board Game', 34.99, 5),
('Action Figure', 14.99, 5);

CREATING DOT NET APIS AND MICROSERVICES USING CRAFTSMAN (WRAPT) LESSON ONE CREATING BASIC .NET WEB API WITH CRAFTSMAN

Benjamin Fadina — Sun, 17 Dec 2023 00:54:28 +0000

In this video, I introduce you to Craftsman, a powerful web API creation tool developed by Paul Devito. Let's dive into the details:

GitHub Repository: You can find the Craftsman GitHub repository at this link. Paul Devito actively maintains it, and it's a great resource for exploring the tool.
Craftsman Documentation: The official website for Craftsman hosts comprehensive documentation. It covers everything you need to know about using Craftsman effectively. https://wrapt.dev/docs/how-it-works
Creating a RecipeManagement Web API:
- We start by defining the domain, entity, and entity properties in a YAML file. This structured approach ensures clarity and consistency.
- Next, we run the Craftsman command to create the web API. Craftsman streamlines the process, making it efficient and straightforward.
- Once the API is generated, we open the solution file in Visual Studio. The solution comprises the web API project, which adheres to the CQRS (Command Query Responsibility Segregation) principle, and the associated test project.
- To ensure data integrity, we generate migrations for the database.
- Finally, we test the API using Swagger, a powerful tool for API exploration and testing.
Accessing the Completed Solution:
- You can find the completed solution files on GitHub: MuyikRecipeManagement.

Craftsman simplifies web API development, and with this walkthrough, you'll be well-equipped to create robust APIs. Happy coding! 🚀🔧

HOW TO GENERATE COMMA SEPERATED STRING USING STUFF FUNCTION IN TRANSACT-SQL

Benjamin Fadina — Wed, 24 May 2023 06:23:49 +0000

Concepts Covered In This Video Include:-

How To Connect To SQL SERVER using management studio. 2.How to create a new database using management studio. 3.How to create tables using management studio 4.How to create relationship between 2 tables using management studio 5.How to insert data into tables using management studio 6.How to create new stored procedures 7.How to use STUFF Transact-SQL function to generate comma separated strings 8.How to execute stored procedures from management studio 9.How to pass new set of parameters to a recently executed stored procedure in management studio

TRANSACT SQL QUERY FOR THE ENTIRE EXERCISE CAN BE FOUND BELOW

USE [master]
GO
/****** Object: Database [ProductCatalogueDB] Script Date: 5/24/2023 6:40:17 AM ******/
CREATE DATABASE [ProductCatalogueDB]

USE [ProductCatalogueDB]
GO
/****** Object: Table [dbo].[ProductCategories] Script Date: 5/24/2023 6:40:17 AM ***/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].ProductCategories ON [PRIMARY]
GO
/*** Object: Table [dbo].[Products] Script Date: 5/24/2023 6:40:17 AM ***/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].Products ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[ProductCategories] ON
GO
INSERT [dbo].ProductCategories VALUES (1, N'Sport Equipment')
GO
INSERT [dbo].ProductCategories VALUES (2, N'Music Equipment')
GO
SET IDENTITY_INSERT [dbo].[ProductCategories] OFF
GO
SET IDENTITY_INSERT [dbo].[Products] ON
GO
INSERT [dbo].Products VALUES (2, N'FIFA U-17 2022 World Cup Match Ball', CAST(456.22 AS Decimal(18, 2)), 1)
GO
INSERT [dbo].Products VALUES (3, N'YAMAHA PSR-570 Keyboard', CAST(3456.57 AS Decimal(18, 2)), 2)
GO
INSERT [dbo].Products VALUES (4, N'Shure Microphone', CAST(872.12 AS Decimal(18, 2)), 2)
GO
INSERT [dbo].Products VALUES (5, N'FIBA 2021 Men''s World Cup Basketball', CAST(762.12 AS Decimal(18, 2)), 1)
GO
SET IDENTITY_INSERT [dbo].[Products] OFF
GO
ALTER TABLE [dbo].[Products] WITH CHECK ADD CONSTRAINT [FK_Products_ProductCategories] FOREIGN KEY([CategoryID])
REFERENCES [dbo].ProductCategories
GO
ALTER TABLE [dbo].[Products] CHECK CONSTRAINT [FK_Products_ProductCategories]
GO
/*** Object: StoredProcedure [dbo].[CommaSeparatedListsOfProductsByCategoryID] Script Date: 5/24/2023 6:40:18 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[CommaSeparatedListsOfProductsByCategoryID]
@CategoryID int
AS
SELECT Products = STUFF((
SELECT ',' + ProductName
FROM Products
WHERE (CategoryID = @CategoryID)
FOR XML PATH('')
), 1, 1, '')
GO
USE [master]
GO
ALTER DATABASE [ProductCatalogueDB] SET READ_WRITE
GO

How To Implement MultiTenancy In Server-Side Blazor Using Database Per Tenant Strategy

Benjamin Fadina — Sun, 16 Apr 2023 06:17:28 +0000

This Video Demonstrates How To Implement MultiTenancy In Server-Side Blazor Using Database Per Tenant Strategy. Source Code can be pulled from https://github.com/benjaminsqlserver/BlazorDatabasePerTenantStrategy

HOW TO CREATE SWAGGER ENABLED ODATA APIS USING RADZEN

Benjamin Fadina — Thu, 09 Mar 2023 04:45:42 +0000

In this video, I show you how to create swagger enabled odata APIS using RADZEN.

Source code for this video can be cloned from https://github.com/benjaminsqlserver/NotableAthletesODataAPI

Send Email Using Server Side Blazor,ASP.NET Core, MailKit and RADZEN

Benjamin Fadina — Sat, 11 Jun 2022 03:26:52 +0000

In response to a request from one of my colleague on the RADZEN forum, I recorded this video tutorial.

CREATING CRUD PAGES WITH SQL SERVER, ASP NET WEB API, ANGULAR AND RADZEN

Benjamin Fadina — Sat, 07 May 2022 19:35:40 +0000

Source code and database script can be found at https://github.com/benjaminsqlserver/BookStoreAngularWithWebAPI