Blazor: How to get sender from event in child component - asp.net-core

Question

I have made a component with an event as described in the docs
If I use multiple instances of the component, is there any way I can tell which instance it was that fired the event?
In "regular" .net there usually is a sender parameter.
See my BlazorFiddle
... or look at my sample code here:
ChildComponent
<div class="panel panel-default">
<div class="panel-heading">#Title</div>
<div class="panel-body">#ChildContent</div>
<button class="btn btn-primary" #onclick="OnClick">
Trigger a Parent component method
</button>
</div>
#code {
[Parameter]
private string Title { get; set; }
[Parameter]
private RenderFragment ChildContent { get; set; }
[Parameter]
private EventCallback<UIMouseEventArgs> OnClick { get; set; }
}
Index
#page "/"
<ChildComponent Title="Panel Title from Parent"
OnClick="#ShowMessage">Hello child 1</ChildComponent>
<br>
<br>
<ChildComponent Title="Panel Title from Parent"
OnClick="#ShowMessage">Hello child 2</ChildComponent>
<br>
<br>
<p><b>#messageText</b></p>
#code {
private string messageText;
private void ShowMessage(UIMouseEventArgs e)
{
// How do I get which ChildComponent was the sender?
messageText = DateTime.Now.ToString() + ": Message from child ?"
}
}
I want to be able to get data from the sending ChildComponent in the ShowMessage-function in Index.

Answer 1

Unfortunately you don't have a sender and this topic was already discussed here: https://github.com/aspnet/Blazor/issues/1277.
No. That would involve creating some new way to track the identity of
a DOM element.
If you were able to describe at a more high level what sort of
functionality you're trying to implement, it might be there's a more
idiomatically Blazor-ish way to achieve what you want simply.
The workaround for it is to explicitly pass parameters (event & others) to your ShowMessage method.
#page "/"
<ChildComponent Title="Panel Title from Parent"
OnClick="#((ev) => ShowMessage(ev, 1))">Hello child 1</ChildComponent>
<br>
<br>
<ChildComponent Title="Panel Title from Parent"
OnClick="#((ev) => ShowMessage(ev, 2))">Hello child 2</ChildComponent>
<br>
<br>
<p><b>#messageText</b></p>
#code {
private string messageText;
// ex: Blazor 0.7 (Old)
private void ShowMessage(UIMouseEventArgs e, int childId)
{
// How do I get which ChildComponent was the sender?
messageText = DateTime.Now.ToString() + ": Message from child " + childId.ToString();
}
// ex: .NET Core 3.0 (Updated)
// UIMouseEventsArgs were removed
// Replace Microsoft.AspNetCore.Components.UIEventArgs with System.EventArgs and remove the “UI” prefix from all EventArgs derived types (UIChangeEventArgs -> ChangeEventArgs, etc.).
// https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-9/
private void ShowMessage(MouseEventArgs e, int childId)
{
// How do I get which ChildComponent was the sender?
messageText = DateTime.Now.ToString() + ": Message from child " + childId.ToString();
}
}
Old BlazorFiddler here (Blazor 0.7): https://blazorfiddle.com/s/9zh85obk
Updated BlazorFiddler here (.NET Core 3.0): https://blazorfiddle.com/s/5p45emmo
In order to track if there will be any updates on this, you can follow this issue: https://github.com/aspnet/AspNetCore/issues/5501