by SamProf
@page "/" @inject IJSRuntime JSRuntime <h1>Hello, world!</h1> Welcome to your new app. <br/> <button class="btn btn-primary" @onclick="HandleComplex">Trigger Complex</button> <button class="btn btn-success" @onclick="HandleSimple">Trigger Simple</button> @code{ protected override void OnAfterRender(bool firstRender) { if (firstRender) { var dotNetReference = DotNetObjectReference.Create(this); JSRuntime.InvokeVoidAsync("initializeDotNetHelper", dotNetReference); } } async Task HandleComplex(){ await JSRuntime.InvokeVoidAsync("triggerComplex"); } async Task HandleSimple(){ await JSRuntime.InvokeVoidAsync("triggerSimple"); } [JSInvokable] public void Items(List<MyItems> allseries) { Console.WriteLine("Enter");// does not enter here foreach (var eachItem in allseries) { Console.WriteLine("eachItem {0}", eachItem.Name); } } public class MyItems{ public string Name{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> 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> <script> window.initializeDotNetHelper = (dotNetHelper) => { window.dotNetHelper = dotNetHelper; }; window.triggerComplex = ()=>{ alert("triggerComplex"); itemEventComplex(); } window.triggerSimple = ()=>{ alert("itemEventSimple"); itemEventSimple(); } function itemEventComplex() { const obj = {}; obj.self = obj; window.dotNetHelper.invokeMethodAsync('Items', obj); } function itemEventSimple() { const obj = [{Name:'John'},{Name:'Bob'}]; obj.push(obj); // forcing a circular reference on obj const simplifiedObj = obj.filter(x => x.Name).map(x => ({Name: x.Name})); window.dotNetHelper.invokeMethodAsync('Items', simplifiedObj); } </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.