TestComponent.razor
<h3>TestComponent</h3> <p><button @onclick="Button1_Clicked">Button1</button></p> <p><button @onclick="Button2_Clicked">Button2</button></p> @code { [Parameter] public EventCallback Event1 { get; set; } [Parameter] public EventCallback<TestModel> Event2 { get; set; } private void Button1_Clicked(MouseEventArgs obj) { Event1.InvokeAsync("Event1 is fired"); } private void Button2_Clicked(MouseEventArgs obj) { Event2.InvokeAsync(new TestModel() {Message = "Event2 is fired", Date = DateTime.Now}); } }
TestModel.cs
namespace BlazorApp1; public class TestModel { public DateTime Date { get; set; } public string Message { get; set; } }
Index.razor
@page "/" <TestComponent Event1="Callback" Event2="Callback2"></TestComponent> <div>@((MarkupString) output)</div> @code { private string output = ""; private void Callback2(TestModel obj) { output += "<p>" + obj.Message + ", "; output += obj.Date +"</p>"; } private void Callback(object obj) { output += "<p>"+obj+"</p>"; } }
References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-6.0#eventcallback
https://blazor-university.com/components/component-events/
https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/