Blazor: The difference between builtin @on{EVENT} and custom EventCallback

user_1283836 0
Viewed 233

Excuse me if this question seems silly; but I have confusion over the usage of @ prefix.

When hovering the mouse over builtin events such as onclick the IntelliSense in Visual Studio shows that the type of event (onclick in this case) is Microsoft.AspNetCore.Components.EventCallback and when implementing an EventCallback in a component, the type obviously again is of Microsoft.AspNetCore.Components.EventCallback;

But why builtin events such as onclick should be prefixed with @ while EventCallback(s) should be declared just like an attribute (without the @ as prefix)?

using an <code>EventCallback</code>

using a builtin event

blazor
1 Answers

Excuse me if this question seems silly; but I have confusion over the usage of @ prefix.

Not at all... This is a very important question that all developers in Blazor should be not only able to answer, but also able to act upon.

The attribute "@onclick" is a compiler directive instructing the compiler to create an EventCallback 'delegate'. EventCallback is a struct that stores a reference to a delegate; that is to a method, which is actually the value you assign to the attribute "@onclick", as for instance :

<button type="button" @onclick="ClickMe">Click me</button>

@code
{
     private void ClickMe()
    {
       Console.WriteLine("You clicked me...");
    }
}

As you can see ClickMe is a method that is invoked when you click on the button.

You can also use the Html element attribute "onclick" without the @ sign. This is of course not a compiler directive butt rather Html element attribute, right? And it's value can only be a JavaScript function, as for instance:

<button type="button" onclick="window.ClickMe()">Click me</button>

Now when you click on the button, a JavaScript function, named ClickMe, defined on the window object is called... Note the round parentheses.

Of course there are variety of ways to do the stuff above.

In the photo you posted, the Modal component has a property named onOK whose type is EventCallback, and thus its value should be a suitable method, ModalOnOK. The following code snippet illustrate this:

Modal.razor (definition of Modal)

@code{
    [Parameter]
    public EventCallBack onOK {get; set;}
}

As you can see onOK is a parameter property whose type is EventCallBack. Thus in the parent component, where you use the Modal component, you should assign the property attribute with the value of a method that the EventCallBack can encapsulate.

Sorry, there is lots and lots to say, this is only a fraction of the material. But time to part.

Hope this helps...

user_61528910
Related