1. Home
  2. /
  3. Blazor
  4. /
  5. Todo List Example

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.

More Blazor Typing Exercises

Blazor Counter ExampleBlazor Toggle VisibilityBlazor Simple FormBlazor List RenderingBlazor Counter with StepBlazor Conditional RenderingBlazor Two-Way Binding ExampleBlazor Counter with AsyncBlazor Component Parameter Example

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher