@page "/" <div> <select value="@ProcType" @onchange="@OnChangeProcType"> <option value="A" selected>A</option> <option value="B">B</option> </select> @if(EditPersonList.Count == 0) { <p>Plz Select ProcType...</p> } else { <EditForm Model="EditPersonList" OnValidSubmit="@HandleValidSubmit"> <table> <tr> <th>Id</th> <th>Name</th> <th>Age</th> </tr> @foreach (var item in EditPersonList) { <tr> <td> <input @bind="item.Id" /> </td> <td> <input @bind="item.Name" /> </td> <td> <select @bind="@item.Age"> <option value="1">1</option> <option value="10">10</option> <option value="100">100</option> </select> </td> </tr> } </table> <button type="submit">Submit</button> </EditForm> } </div> <h2>Result</h2> <p>@((MarkupString)@Result)</p> @code { public class Person { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } } public class PersonPerProc { public string Proc { get; set; } public List<Person> Persons { get; set; } } public string ProcType { get; set; } public List<PersonPerProc> BasePersonList {get; set;} = new List<PersonPerProc>(); public List<Person> EditPersonList { get; set; } = new List<Person>(); public string Result {get; set;} protected override void OnInitialized() { // 初期データ作成 var Persons = new List<Person>(); Persons.Add(new Person() { Id = 1, Name = "A1", Age = 1}); Persons.Add(new Person() { Id = 2, Name = "A2", Age = 10}); Persons.Add(new Person() { Id = 3, Name = "A3", Age = 100}); BasePersonList.Add( new PersonPerProc(){Proc = "A", Persons = Persons }); Persons = new List<Person>(); Persons.Add(new Person() { Id = 4, Name = "B1", Age = 100}); Persons.Add(new Person() { Id = 5, Name = "B2", Age = 10}); Persons.Add(new Person() { Id = 6, Name = "B3", Age = 1}); BasePersonList.Add( new PersonPerProc(){Proc = "B", Persons = Persons }); // ProcType = "A"のものを画面に表示 Refresh("A"); } void Refresh(string procType) { ProcType = procType; EditPersonList = BasePersonList.FirstOrDefault(f => f.Proc == procType).Persons; } void OnChangeProcType(ChangeEventArgs e) { Refresh((string)e.Value); } void HandleValidSubmit() { Result = string.Empty; foreach(var person in EditPersonList) { Result += $"ID:{person.Id}\tName:{person.Name}\tAge:{person.Age}<br>"; } } }
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.