@page "/" <h1>Hello, world!</h1> Welcome to your new app. <p>You have selected: @Selected?.Label</p> @foreach (var option in Options) { <label class="option @(Selected == option ? "selected" : null)"> <input type="radio" name="Letters" value="@option.Value" @onchange="@(() => Selected = option)" /> <a>@option.Label</a> <p>@option.Text</p> </label> } @code { private RadioOption? Selected { get; set; } private RadioOption[] Options = new[] { new RadioOption { Value = "a", Label = "Letter A", Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, new RadioOption { Value = "b", Label = "Letter B", Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, new RadioOption { Value = "c", Label = "Letter C", Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, new RadioOption { Value = "d", Label = "Letter D", Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit." } }; class RadioOption { public string Label { get; set; } public string Text { get; set; } public string Value { get; set; } } }
namespace BlazorFiddleProject { using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { } // Warning: IComponentsApplicationBuilder - not the original .NET 6.0 interface. This was done to make old saves work. public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>BlazorFiddleProject</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <script src="_content/MatBlazor/dist/matBlazor.js"></script> <style> .option { display: block; border: 1px solid transparent; } .option.selected { border-color: red; } .option:hover { background-color: #ccc; cursor: pointer; } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Add component

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.