Todo List Example - Blazor Typing CST Test
Loading…
Todo List Example — Blazor Code
A minimal Blazor component that allows adding and removing tasks from a Todo list.
@page "/todo"
<h3>Todo List</h3>
<input @bind="newTask" placeholder="Add new task" />
<button @onclick="AddTask">Add</button>
<ul>
@foreach(var task in tasks) {
<li>@task <button @onclick="() => RemoveTask(task)">Remove</button></li>
}
</ul>
@code {
private string newTask = ""
private List<string> tasks = new List<string>()
private void AddTask() {
if(!string.IsNullOrWhiteSpace(newTask)) tasks.Add(newTask)
newTask = ""
}
private void RemoveTask(string task) => tasks.Remove(task)
}Blazor Language Guide
Blazor is a Microsoft framework for building interactive web applications using C# and .NET, running client-side via WebAssembly or server-side via SignalR.
Primary Use Cases
- ▸Building interactive web applications in C#
- ▸Creating reusable UI components
- ▸Developing full-stack .NET web apps
- ▸Integrating with ASP.NET Core APIs
- ▸Rapid prototyping and enterprise dashboards
Notable Features
- ▸Component-based architecture
- ▸Two hosting models: WebAssembly & Server
- ▸C# code running in browser
- ▸Seamless .NET integration
- ▸Routing, forms, and validation built-in
Origin & Creator
Blazor was created by Microsoft in 2018 to bring C# and .NET development to web browsers without requiring JavaScript.
Industrial Note
Blazor is primarily used in enterprise .NET ecosystems for full-stack C# development, reducing reliance on JavaScript and enabling shared code across client and server.
Quick Explain
- ▸Blazor allows developers to write web UIs in C# instead of JavaScript.
- ▸It supports two hosting models: Blazor WebAssembly (client-side) and Blazor Server (server-side).
- ▸Provides component-based architecture for reusable UI elements.
- ▸Integrates seamlessly with ASP.NET Core backend services.
- ▸Widely used for enterprise web apps, dashboards, and full-stack .NET applications.
Core Features
- ▸Razor syntax for UI components
- ▸Dependency Injection (DI) support
- ▸Event handling in C#
- ▸JavaScript interop when needed
- ▸State management via cascading values and parameters
Learning Path
- ▸Learn C# and .NET basics
- ▸Understand Razor syntax and components
- ▸Learn Blazor WebAssembly vs Server
- ▸Work with dependency injection and services
- ▸Practice building real-world applications
Practical Examples
- ▸Build a counter component
- ▸Fetch data from an ASP.NET Core API
- ▸Implement login and authentication
- ▸Create a reusable navigation menu
- ▸Develop a dashboard with charts and tables
Comparisons
- ▸Blazor vs React: C# vs JavaScript, full-stack vs frontend-only
- ▸Blazor vs Angular: .NET integration vs TypeScript ecosystem
- ▸Blazor vs Vue: component-based similarity, different languages
- ▸Blazor WebAssembly vs Server: client-side vs server-side execution
- ▸Blazor vs Razor Pages: SPA interactivity vs traditional page model
Strengths
- ▸Write web apps entirely in C#
- ▸Share code between client and server
- ▸Strong tooling via Visual Studio and .NET CLI
- ▸Integrated security and authentication features
- ▸Enterprise-grade framework with long-term support
Limitations
- ▸WebAssembly apps may have larger initial load
- ▸Limited third-party UI components compared to JavaScript frameworks
- ▸Some JavaScript interop is still needed for advanced browser APIs
- ▸SEO optimization is more complex for WebAssembly apps
- ▸Smaller developer ecosystem than React or Angular
When NOT to Use
- ▸Pure JavaScript environments with no .NET backend
- ▸SEO-critical apps requiring server-rendered HTML
- ▸Lightweight widgets where JS frameworks are simpler
- ▸High-performance gaming or graphics-heavy web apps
- ▸Projects without .NET skillset
Cheat Sheet
- ▸@page - define routing for component
- ▸@inject - inject a service
- ▸@bind - two-way data binding
- ▸Event handlers - e.g., @onclick
- ▸CascadingValue - share state across components
FAQ
- ▸Is Blazor free?
- ▸Yes - open-source under the .NET Foundation.
- ▸Can Blazor replace JavaScript frameworks?
- ▸For many web apps, yes; some JS interop may still be needed.
- ▸Which languages are used?
- ▸C# and Razor.
- ▸Does Blazor support mobile apps?
- ▸Yes, via MAUI integration.
- ▸Is WebAssembly faster than server-side Blazor?
- ▸WebAssembly runs client-side and reduces server load, but initial load is slower.
30-Day Skill Plan
- ▸Week 1: Create simple components and data binding
- ▸Week 2: Implement routing and forms
- ▸Week 3: Fetch data from APIs
- ▸Week 4: Add authentication and authorization
- ▸Week 5: Build full SPA with shared components
Final Summary
- ▸Blazor is a .NET framework for building interactive web apps with C#.
- ▸Supports both WebAssembly (client-side) and Server hosting models.
- ▸Uses component-based architecture and Razor syntax.
- ▸Integrates seamlessly with ASP.NET Core and other .NET services.
- ▸Ideal for enterprise-grade web apps and full-stack .NET development.
Project Structure
- ▸Pages/ - routed UI components
- ▸Shared/ - reusable components
- ▸wwwroot/ - static files (JS, CSS)
- ▸Program.cs - app startup and DI configuration
- ▸App.razor - routing and root component
Monetization
- ▸Enterprise SaaS applications
- ▸Internal dashboards reducing licensing costs
- ▸Subscription-based web apps
- ▸Integration with payment APIs
- ▸Component library development for resale
Productivity Tips
- ▸Reuse components across pages
- ▸Leverage DI for shared services
- ▸Use async/await for API calls
- ▸Lazy-load large modules in WebAssembly
- ▸Debug in Visual Studio for server-side apps
Basic Concepts
- ▸Razor components are reusable UI blocks
- ▸Data binding supports one-way and two-way flows
- ▸Dependency Injection enables service injection
- ▸Routing maps URLs to components
- ▸Event handling uses standard C# methods