Can somebody explain the various syntaxes for Blazor component tags

user_173397 0
Viewed 378

In my .razor files I have these tags (just an example). They work but I cannot explain to myself the reasons behind the various syntaxes

<HxButton Text=@StartButtonText OnClick="StartClick" Color="ThemeColor.Primary"/>
        
<Listener @ref=_listener/>
    
<button  @onclick=Show>Modal</button>

Specifically

  • Why do some tags have an @ at the start of the name (like ref and onclick) and others not.
  • Why is ThemeColor.Primary in quotes but not StartButtonText
  • Why does StartButtonText have an @ sign
  • Why does the @onclick for the button have plain text (not @Show or "Show")

I hate randomly cycling through syntaxes each time to find one that works.

Note, HxButton is from the HAVIT component library, Listener is my component built on top of HAVIT HxModal

blazor
2 Answers

Blozor is the meeting point for two languages, C# and HTML. And they both offer some variations.

  • Why do some tags have an @ at the start of the name (like ref and onclick) and others not.

  • The Directive attributes (@ref, @key, @onclick etc) need an @ in front to indicate it is C#. This was chosen because they often have HTML/JS equivalents. They start wit a lower-case letter.

  • When a Component defines a Parameter then you don't need an @ but it is allowed. The very first versions of Blazor required it.

  • everything else is passed on to HTML/JS

  • Why is ThemeColor.Primary in quotes but not StartButtonText

StartButtonText should also have been in quotes, this is leniency in HTML. Text="@StartButtonText" is recommended.

  • Why does StartButtonText have an @ sign

This is the main 'switch' of Blazor (Razor syntax). Without the @ you would see the string "StartButtonText" on the screen. With the @ it becomes the name of a C# variable.
This is the same @ as in @foreach() {...}

When a delegate (method) is expected the @ is allowed but not required.

  • Why does the @onclick for the button have plain text (not @Show or "Show")

At this point it is already clear that Show has to be a C# method. You would get an error if it wasn't. There is no need for an @ to switch languages. But C# allows an @ in front of any name. It is an escape rule that lets you use reserved words like int @int = 3; but it is also allowed for unreserved words. Using Show or "Show" is again a leniency of HTML.

@onclick="Show" is recommended.

user_607610

The first distinction to be made here is between a Razor component tag and an HTML tag, as for instance to explain what is OnClick in the HxButton component, and how it is compared to @onclick in the button tag. So let me expand a little bit on this and other related difficulties, so that the baffled reader can get a better understanding of the subject.

HxButton is a Razor component that has a parameter attribute named OnClick already assigned with the value "StartClick", which is the name of a method defined in the parent component. This method may have parameters.

Parent container of HxButton component

<HxButton OnClick="StartClick"/>

@code
{
   private void StartClick (string value)
   {

   } 
}

How many parameters and their types is determined in the definition of the HxButton component. Here's the definition of the OnClick parameter property in the component:

[Parameter] public EventCallback<string> OnClick {get; set;}

Note that this event 'delegate' encapsulates a method that has a single parameter of type string. When this delegate is executed from within the HxButton component , as for instance, OnClick.InvokeAsync(value);, the StartClick method assigned to the parameter attribute OnClick in the instantiation of HxButton is called and a string value is passed to it.

OnClick is defined as a property, and the compiler has no difficulties in seeing it. @onclick in the button Html tag is a compiler directive attribute. It instructs the compiler that the value assigned to the attribute should be a method that is called when the click event of the button element is triggered. It also tells the compiler to create behind the scenes, an event call back of the EventCallback 'delegate' to represent the call back method.

But you may use a construct like this: onclick="alert('Hello')". In that case, onclick is treated by the compiler as a pure Html attribute, and it is rendered as is. To distinguish between these two possibilities you'll have to instruct the compiler what you want to do. So is the usage of the at "sign". Incidentally, onclick="alert('Hello')", is pure JavaScript.

Note: The value assigned to the OnClick parameter attribute is an expression that should evaluate to EventCallback<string>, thus it can be the name of a method, but also a lambda expression, as for instance:

OnClick="@((value) => StartClick(value)"

Note also that the name of the method can be prepended with the @ sign like this: OnClick="@StartClick"

This was necessary when Blazor was in its initial development phase. It is no longer necessary, but the user is not enforced not to use it. It took me some time to get rid of the habit of using it like this. Nowadays, I always skip the @ sign.

To wrap it up, all the compiler directive attributes should be prepended with the @ sign, such as @ref @onclick @oninput, etc.

Why does StartButtonText have an @ sign

Because it is an expression that should evaluate to a string value. First off, I'd advise you to use it with enclosing quotes, like this:

<HxButton Text="@StartButtonText" />

Note: "@StartButtonText" is a string interpolation expression that enable data binding between the Text property defined on the HxButton component, and the variable StartButtonText defined on the hosting component.

Note also that you must apply the @ sign, otherwise, the string Text property will contain the string StartButtonText instead of the value stored in the variable StartButtonText

Why is ThemeColor.Primary in quotes but not StartButtonText

This question belongs in the department of human nature, or perhaps it should be directed at Peter Morris whose treatise leads to anarchy instead of observance of uniformity. I'm specifically referrring to him because you've provided a link to what you called a good explanation

Anyhow, you can do it either like this: Color="ThemeColor.Primary" or like this: Color="@ThemeColor.Primary" or like this: Color=ThemeColor.Primary or like this: Color=@ThemeColor.Primary

If you ask the author of your code: Why is ThemeColor.Primary in quotes but not StartButtonText, he'll probably try to to blame human inconsistency rather than his incompetency.

The Visual Studio editor automatically insert the double quotations within which you should provide a value, and that is how it should be done. Personal preferences, as preached by Peter Morris can be bad to society. And your question was good one, as it shows the existence of such absurd inconsistency in the same line: Yes, why enclose ThemeColor.Primary in quotes but not StartButtonText....

user_61528910
Related