@page "/" <h1>Bagel Store</h1> <div> <label for="txtBagelCount">Number of Bagels: </label> <input id="txtBagelCount" @bind="BagelCount" @bind:event="oninput" /> </div> <div id="divBagelKind"> <label for="divBagelKind">Kind of Bagel: </label> <input type="radio" name="rbgBagelKind" value="Plain" id="rdbPlain" @onchange="OnChangeKind" checked /> <label for="rdbPlain">Plain</label> <input type="radio" name="rbgBagelKind" value="Wheat" id="rdbWheat" @onchange="OnChangeKind" /> <label for="rdbWheat">Wheat</label> <input type="radio" name="rbgBagelKind" value="Everything" id="rdbEverything" @onchange="OnChangeKind" /> <label for="rdbEverything">Everything</label> </div> <div id="divOptions"> <label for="divOptions">Options: </label> <input type="checkbox" id="chkToasted" @bind="IsToasted" /> <label for="chkToasted">Toasted</label> <input type="checkbox" id="chkCreamCheese" @bind="IsCreamCheese" /> <label for="chkCreamCheese">Cream Cheese</label> </div> <div id="divDineIn"> <input type="checkbox" id="chkDineIn" @bind="IsDineIn" /> <label for="chkDineIn">Dine In</label> </div> <div> <label>Tax: @subTotal.ToString("C")</label> </div> <div> <label>Tax: @tax.ToString("C")</label> </div> <div> <label>Total Cost: @totalCost.ToString("C")</label> </div> @code { int _bagelCount = 0; int BagelCount { get => _bagelCount; set { _bagelCount = value; Recompute(); } } string _bagelKind; string BagelKind { get => _bagelKind; set { _bagelKind = value; Recompute(); } } bool _isToasted; bool IsToasted { get => _isToasted; set { _isToasted = value; Recompute(); } } bool _isCreamCheese; bool IsCreamCheese { get => _isCreamCheese; set { _isCreamCheese = value; Recompute(); } } bool _isDineIn; bool IsDineIn { get => _isDineIn; set { _isDineIn = value; Recompute(); } } decimal subTotal; decimal tax; decimal totalCost; void OnChangeKind(ChangeEventArgs e) => BagelKind = e.Value.ToString(); void Recompute() { subTotal = 2.0m; switch (BagelKind) { case "Wheat": subTotal += 0.50m; break; case "Everything": subTotal += 1.50m; break; } if (IsToasted) subTotal += 0.50m; if (IsCreamCheese) subTotal += 1.0m; subTotal *= BagelCount; tax = 0; if (IsDineIn) tax = subTotal * 0.07m; totalCost = subTotal + tax; } }
namespace BlazorFiddleProject { using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { } 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"> <script src="_content/MatBlazor/dist/matBlazor.js"></script> <style> app { } </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.