ASP.NET Core UI Patterns Tutorial
A comprehensive guide to building modern CRUD applications with multiple UI patterns
What This Application Demonstrates
This educational project showcases 8 different UI patterns for implementing CRUD operations in a single ASP.NET Core application, helping you understand the tradeoffs between traditional server-rendered views and modern client-side frameworks.
Multiple UI Patterns
Compare MVC, Razor Pages, React, Vue, htmx, and vanilla JavaScript implementations
Clean Architecture
Repository pattern, dependency injection, DTOs, and separation of concerns
RESTful API
OpenAPI/Swagger documentation, versioned endpoints, standardized responses
Modern UX
Dynamic theme switching, Bootstrap 5, responsive design, modal forms
CRUD Implementation Approaches
Explore 8 different ways to implement Employee CRUD operations. Each approach has unique characteristics, benefits, and tradeoffs. Use this comparison to choose the right pattern for your project.
Traditional MVC
Classic pattern with separate views for Create, Edit, Details, and Delete operations. Full page reloads, server-side validation.
jQuery AJAX + MVC
Single index view with modal forms for all CRUD operations. Uses jQuery AJAX and partial views for dynamic updates without page reloads.
Razor Pages
Page-focused approach with tightly bound UI and code-behind logic. Simpler than MVC for page-centric scenarios, excellent for CRUD.
Vanilla JavaScript SPA
Single Page Application using vanilla JavaScript, fetch API, and Bootstrap modals. No frameworks, direct REST API consumption.
React SPA
Component-based SPA using React 18 with hooks, functional components, and state management. Modern UI patterns with reusable components.
Vue SPA
Reactive SPA using Vue 3 Composition API with declarative templates. Client-side sorting, filtering, and pagination.
htmx Hypermedia
Server-driven UI with HTML-over-the-wire pattern. Minimal JavaScript, enhanced HTML attributes, progressive enhancement.
Pivot Table Analysis
Interactive data analysis using PivotTable.js. Drag-and-drop pivot tables for exploring employee data across multiple dimensions.
Quick Comparison
| Approach | Page Reloads | JavaScript Required | SEO Friendly | Learning Curve | Best For |
|---|---|---|---|---|---|
| Traditional MVC | Full | None | Excellent | Low | Traditional web apps, SEO-critical content |
| jQuery AJAX | None | Moderate | Partial | Medium | Modernizing legacy apps, gradual enhancement |
| Razor Pages | Full | None | Excellent | Low | Page-focused apps, CRUD operations, forms |
| Vanilla JS SPA | None | Moderate | Poor | Medium | Learning, prototypes, no build tools |
| React | None | Heavy | Poor | High | Complex UIs, component reuse, large teams |
| Vue | None | Heavy | Poor | Medium | Progressive enhancement, reactive UIs |
| htmx | None | Minimal | Good | Low | Server-rendered apps, minimal JS preference |
| Pivot Table | None | Moderate | Fair | Low | Data analysis, reporting, business intelligence |
Technical Architecture
Clean Architecture
- Domain Layer: DTOs, responses, business models
- Repository Layer: Data access, EF Core context, mock data generation
- Web Layer: Controllers, views, pages, API endpoints
- Test Projects: Unit tests for domain and repository layers
Technology Stack
- .NET 10 / C# 13: Latest framework and language features
- Entity Framework Core: In-memory database for demos
- Bootstrap 5: Responsive UI with dynamic theming
- OpenAPI/Swagger: Interactive API documentation
Best Practices
- Dependency Injection: Interface-based services, scoped lifetimes
- Repository Pattern:
IEmployeeServiceabstraction - Async/Await: All I/O operations are asynchronous
- DTOs: Never expose EF entities directly to UI
RESTful API
- Versioned Endpoints:
/api/v1/employee - Standard HTTP Methods: GET, POST, PUT, DELETE
- ActionResult<T>: Proper status codes and responses
- ProblemDetails: Standardized error responses
Features & Capabilities
Dynamic Theming
Switch between Bootswatch themes instantly. Supports light/dark modes, multiple color schemes, and persists theme preference.
Health Monitoring
Built-in health checks at /health. Monitor application status,
database connectivity, and service availability.
API Documentation
Interactive Swagger UI for testing API endpoints. Complete OpenAPI specification with request/response examples.
Responsive Design
Mobile-first responsive layouts. Works seamlessly across desktop, tablet, and mobile devices with Bootstrap 5.
Mock Data Generation
Automatic generation of realistic test data. Pre-populated with employees, departments, and profile images.
Application Insights
Integrated telemetry and monitoring. Track performance, errors, and usage patterns with Azure Application Insights.
DevOps & Deployment
GitHub Actions CI/CD
Automated workflows for building, testing, and deploying the application:
- Docker Image Build & Push
- CodeQL Security Scanning
- Automated Test Execution
Container Deployment
Multi-stage Docker builds optimized for production:
- Alpine-based images for minimal size
- Non-root user security
- Trivy vulnerability scanning
- Docker Hub Repository
Live Deployment
See this application running in production: https://samplecrud.markhazleton.com/ Windows IIS VM
Quick Start
git clone https://github.com/markhazleton/UISampleSpark.git
cd UISampleSpark
dotnet restore
cd UISampleSpark.UI
dotnet run
# Visit https://localhost:5001docker pull markhazleton/uisamplespark:latest
docker run -p 8080:8080 markhazleton/uisamplespark
# Visit http://localhost:8080
# Or build from source
docker build -t uisamplespark ./UISampleSpark.UILearning & Documentation
Educational Scope
This is an educational project designed for learning purposes:
- No Authentication/Authorization: Intentionally omitted for simplicity
- In-Memory Database: Data doesn't persist between restarts
- Mock Data: Pre-populated with test employees and departments
- Security Scanning: CodeQL and Trivy for demonstration only
Ready to Explore?
Start with any CRUD implementation and compare approaches to find the best fit for your project.