"The attribute names could not be inferred from bind attribute 'bind-value'" error in Blazor

Question

I've just migrated a Blazor project from Core 3 Preview 6 to Preview 8 and I'm now getting this error:

The attribute names could not be inferred from bind attribute 'bind-value'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc.

I've isolated the component that's causing this to happen, and the code certainly seems to bind-value set as per the instructions in the error message:

      <TelerikDropdownList Data="@State.ContainerSizes" 
                           ValueField=@nameof(ContainerSize.ContainerSizeId)
                           TextField=@nameof(ContainerSize.ContainerSizeName)
                           @bind-Value="@ContainerSizeIdNoNull"
                           >
      </TelerikDropdownList>

I've tried removing the @ from @bind-Value and changing the capitalisation @bind-Valueetc. but all to no avail.

What can be causing this?

Answer 1

It turns out there are at least two causes of this:

1. The component name is now case-sensitive

The answer turns out to be that naming of blazor components is now case-sensitive, and I was missing a capital letter in 'TelerikDropdownList' which should be TelerikDropDownList.

The change to use case-sensitive names is documented here and is also discussed here and in the official documentation here. The idea was to reduce misleading messages, but it's had the consequence of introducing another one, so I've raised an issue for that on the AspNetCore repo.

2. You've forgotten the @using statement for the component's namespace

You'll also get the same error if you've forgotten or removed the @using statement for the component's namespace. That's very easy to do if you're using ReSharper as it is currently flagging them as unused and offering to remove them.

Checking if this is the issue

A good way to check if the compiler has correctly identified your component as a Blazor component rather than a HTML tag is to check the colour coding of the keywords. They will be the same colour if things are working correctly (green in the example below):

Whereas if the name or namespace are wrong you'll see a mix of colours (note that Data and ValueField are now a different colour to TelerikDropdownList):

Answer 2

“The attribute names could not be inferred from bind attribute 'bind-value'” exception in Blazor

I had a similar issue, but the solution was rather easy than intuitive!

Finally I found the information that adding a missing using statement of the used component was helpful. so did I. And it worked!

Despite the component name was shown as green (like it is recognized) it wasn't. Only the missing using solved the problem. This is a missleading behavior.

So if you have the same problem, check if you're missing a 'using' for the actual component even if the component's name is shown in green.

Answer 3

In my case I had following parameters:

[Parameter]
public string[] BindingValue { get; set; }

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

And the binding:

<MultiselectDropdownComponent 
@bind-BindingValue="SessionState.MyArray" />

Was producing the same error as in subject. I had a using statement specified as well..

From the MS documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-5.0#binding-with-component-parameters

<Child @bind-Year="year" />

The Year parameter is bindable because it has a companion YearChanged event that matches the type of the Year parameter.

By convention, a property can be bound to a corresponding event handler by including an @bind-{PROPERTY}:event attribute assigned to the handler. <Child @bind-Year="year" /> is equivalent to writing:

<Child @bind-Year="year" @bind-Year:event="YearChanged" />

So I decided to explicitly specify the event and it worked!

<MultiselectDropdownComponent 
@bind-BindingValue="SessionState.MyArray"
@bind-BindingValue:event="BindingValueChanged" />

edit: using Blazor WASM and .Net 5

Answer 4

I can add another - not obvious pitfall (at least to me).

Fully qualifying the component, and next relying on the using statement to identify the properties does not work. This got added by intellisense.

Not working example:

@using WebUI.Components.Modals
<WebUI.Components.Modals.WebUI.Components.Modals.AssetModal @bind-IsVisible="_assetDialogVisible" Asset="_selectedAsset"></WebUI.Components.Modals.WebUI.Components.Modals.AssetModal>

Working version:

@using WebUI.Components.Modals
<AssetModal @bind-IsVisible="_assetDialogVisible" Asset="_selectedAsset"></AssetModal>