About Component parameters

[dubeg]

Should we always use @ when referencing the component members (ie. `Parameter="@member"), as in the following example?

<InputText 
  Value="@EmployeeName"
  ValueExpression="@( () => EmployeeName )"
  ValueChanged="@EmployeeName_Changed"
  />

I've noticed that the following works as well:

<InputText 
  Value="@EmployeeName"
  ValueExpression="() => EmployeeName"
  ValueChanged="EmployeeName_Changed"
  />

However, in this example, the Value parameter is set to the string "EmployeeName", instead of the value it contains.

<InputText 
  Value="EmployeeName"
  ValueExpression="() => EmployeeName"
  ValueChanged="EmployeeName_Changed"
  />

Is the reason that setting ValueChanged works without the @, but not Value is because of type inference performed by the parser?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 8b1b6ad8-13ba-0195-8829-ade3b1b0b9cb
• Version Independent ID: 6609ea68-a918-f3b9-8c9c-004a4436e350
• Content: ASP.NET Core Blazor data binding
• Content Source: aspnetcore/blazor/data-binding.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @dubeg ... We don't show that syntax, thus I don't think engineering recommends those approaches for component params. We show everywhere, including in the Forms & Validation topic for these validation components, @bind-Value (i.e., @bind-{PROPERTY}) syntax ...

@bind-Value="starship.ProductionDate"

The "value" (the property on the model, which is starship.ProductionDate in that example) isn't prefixed with @ because the @bind-{PROPERTY} syntax means that whatever is in the quotes will be treated as C#.

I'll leave this up for triage in case Artak has any further remarks. AFAIK Artak, we cover this consistently across topics. If you don't have further guidance, we can close this.

[dubeg]

Hello Rex. Yes, it seems consistent in the docs.

In some examples/articles on the web, people sometimes write it without the @, and I discovered it on my own as well. For example: in an article from Chris Sainty, he writes:

<ChildComponent ParentsTitle="Title" />

Just thought I'd ask, since this confused me. I kinda liked not using @ when assigning to ValueExpression since it avoided me an extra pair of parenthesis, but if it's not supported and/or I get too confused, I'll just always use the @ except for literal values.

I'd maybe suggest an explicit note or warning on this for clarification or guidance. What do you think? Could more people come across conflicting syntaxes on the web and get confused too?

Does the lack of @ fail only for InputBase.Value?

[guardrex]

Good point ... we show that approach at ...

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#component-parameters

... because the attribute value is just a string.

I think we DO need to clarify things a bit further. Thanks for being persistent about it, @dubeg.

If what's in the quotes (the attribute value) is C#, then a value can be applied with @ syntax ...

<ChildComponent Title="@someLocalVar"
                OnClickCallback="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

... if needed. I mean if the value is just a string, then you wouldn't use a var there. If the value is in a var, then that should be fine.

... or @bind={PROPERTY} syntax can be used in these cases where the value is taken as C# and you want binding to occur ...

<ChildComponent @bind-Title="someLocalVar"
                OnClickCallback="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

... with the child having an added ...

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

Sooooo ... 😄 ...... we've given Artak a bit more the chew on here! lol

I'll go ahead and schedule this for further work taking into account anything that Artak adds to the discussion.