HTMLBlazor - HTML & CSS UI Components Demo

A .NET 10 Blazor Server application demonstrating modern UI components built with HTML and CSS, featuring minimal JavaScript usage. This project showcases reusable UI controls that can be integrated into any Blazor component library.

?? Features

This application demonstrates 6 core UI components that leverage native HTML and CSS capabilities:

• Dialog - Modal dialogs with overlay
• DropDown - Custom dropdown menus
• Accordion - Collapsible content sections
• Toast - Notification messages
• Popover - Contextual tooltips and popovers
• Add Employee - Generic entity dialog component with form validation

??? Technology Stack

• .NET 10 - Latest .NET framework
• Blazor Server - Interactive server-side rendering
• C# 13.0 - Modern C# features
• Bootstrap 5 - Responsive styling
• HTML/CSS - Native web technologies (minimal JavaScript)

?? Prerequisites

• .NET 10 SDK or later
• Visual Studio 2025 or later (recommended) or Visual Studio Code
• A modern web browser (Chrome, Edge, Firefox, Safari)

?? Getting Started

Clone the Repository

git clone <repository-url>
cd HTMLBlazor

Build and Run

Using Visual Studio

1. Open HTMLBlazor.sln in Visual Studio
2. Press F5 or click the "Run" button
3. The application will launch in your default browser

Using .NET CLI

cd HTMLBlazor
dotnet restore
dotnet build
dotnet run

The application will be available at:

• HTTPS: https://localhost:5001
• HTTP: http://localhost:5000

?? Project Structure

HTMLBlazor/
??? Components/
?   ??? Layout/
?   ?   ??? MainLayout.razor          # Main layout component
?   ?   ??? NavMenu.razor             # Navigation menu
?   ?   ??? ReconnectModal.razor      # Blazor reconnection UI
?   ??? Pages/
?   ?   ??? Home.razor                # Landing page
?   ?   ??? Dialog.razor              # Dialog component demo
?   ?   ??? DropDown.razor            # Dropdown component demo
?   ?   ??? Accordion.razor           # Accordion component demo
?   ?   ??? Toast.razor               # Toast notification demo
?   ?   ??? Popover.razor             # Popover component demo
?   ?   ??? AddEmployee.razor         # Generic entity form demo
?   ?   ??? AddEntityDialog.razor     # Reusable entity dialog
?   ?   ??? Error.razor               # Error page
?   ?   ??? NotFound.razor            # 404 page
?   ??? App.razor                     # Root component
?   ??? Routes.razor                  # Routing configuration
?   ??? _Imports.razor                # Global imports
??? Models/
?   ??? Employee.cs                   # Employee data model
??? wwwroot/                          # Static assets
??? Program.cs                        # Application entry point
??? HTMLBlazor.csproj                 # Project file

?? Component Highlights

Dialog Component

A modal dialog implementation with:

• Overlay background
• Click-outside-to-close functionality
• Stop propagation for dialog content
• Responsive design

Generic Entity Dialog (AddEntityDialog)

A reusable form component featuring:

• Generic type parameter support (TEntity)
• Dynamic form generation based on model properties
• Callback for entity saved events
• Validation support

Employee Management

Demonstrates the generic dialog with:

• Employee data model
• Form input for multiple field types (text, email, date, number, boolean)
• Display table for saved employees
• Auto-incrementing ID assignment

?? Configuration

Development Mode

The application uses different error handling based on the environment:

# Set environment variable for detailed errors
set ASPNETCORE_ENVIRONMENT=Development

Error Handling

• Development: Detailed error information with request ID tracking
• Production: Custom error page at /Error
• 404 Errors: Custom not-found page at /not-found

HSTS Configuration

The application uses HSTS (HTTP Strict Transport Security) in production with a default of 30 days. Modify in Program.cs if needed.

?? Styling

The application uses:

• Bootstrap 5 for base styling
• Component-scoped CSS for individual component styles
• Isolated CSS files (e.g., Accordion.razor.css, Toast.razor.css)

?? Key Features

Navigation

• Responsive navigation menu with checkbox-based toggle
• Bootstrap icons integration
• NavLink with active state highlighting

Routing

• Page-based routing with @page directives
• Status code handling (404 redirects)
• Exception handling with custom error pages

Interactivity

• Interactive Server render mode
• Real-time updates via SignalR
• Automatic reconnection handling

?? Development

Adding New Components

1. Create a new .razor file in Components/Pages/
2. Add the @page directive with route
3. Update NavMenu.razor with navigation link
4. Optionally create a scoped CSS file (ComponentName.razor.css)

Models

Add new data models in the Models/ folder and use them with the generic AddEntityDialog component.

?? Browser Support

• Chrome (latest)
• Edge (latest)
• Firefox (latest)
• Safari (latest)

?? License

[Add your license information here]

?? Contributing

[Add contribution guidelines here]

?? Contact

[Add contact information here]

?? Resources

• Blazor Documentation
• .NET 10 Documentation
• Bootstrap Documentation

---

Note: This is a demonstration project showcasing HTML and CSS-based UI components with minimal JavaScript dependency, perfect for learning Blazor component development and creating reusable UI libraries.