Databinding in Blazor: Is it possible to use Complex type as a property type on a Component for databinding?

[htmlsplash]

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

When writing a custom control in Blazor and then exposing the parameter property for databinding of non-primitive data type (ex. an object with properties), is it possible to databind to that parameter property.

Example (AutoComplete list component property):

` [Parameter] public AutoCompleteListItem SelectedItem { get; set; }

[Parameter] public EventCallback SelectedItemChanged { get; set; }`

AutoCompleteListItem definition:

` public class AutoCompleteListItem { public string Text { get; set; } public string Value { get; set; }

}`

Binding to it on a page:

`<AutoCompleteList @rendermode=InteractiveWebAssembly @bind-SelectedItem.Value="SearchParams.CountyId"

@code {

public ProjectSearchForm SearchParams { get; set; } = new();

public class SearchForm
{
    public string CountyId { get; set; }
    public string MunicipalityCode { get; set; }
}

}`

The bind directive is binding to the selected item's Value property which is of type AutoCompleteListItem.

1) Is this possible in Blazor and if not, workaround or possible support in the future? Or for databinding I have to stick to primitive datatypes such as int, string, double?

2) Aside question: Notice that the autocomplete list is using render mode: InteractiveWebAssembly. The list is inside an EditForm component that lives on an SSR page. When I submit the page to the server (using Editform), will the value of my autocomplete list bind to the SearchForm.CountyId field on the server? Currently, I've been trying to do that and the field is blank on the server (and I have changed my autocomplete list binding to bind to simple string value). Basically, I am trying to use an interactive component on the client that captures users selection and submit this value to the server using traditional SSR form submit. It appears to me that I would have to somehow capture the value in a hidden field that is inside some form and manually extract it on the server? It would be nice if we could use interactive web assembly components and still capture their state on the server using SSR request/response model.

Describe the solution you'd like

See description of the problem.

Additional context

No response

[javiercn]

@htmlsplash thanks for contacting us.

<AutoCompleteList @rendermode=InteractiveWebAssembly @bind-SelectedItem.Value="SearchParams.CountyId

This will not work because you are crossing the render mode boundary and only primitive types that we can serialize can do so. For what you are trying to achieve, I suspect that you should instead bind the data inside the AutoCompleteList, have a handler to handle the form post/submit. Take different actions whether you are rendering SSR or WebAssembly:

• SSR: Grab the bound data from the form, and trigger an event so that your parent component can react to the data.
• WebAssembly: Render the autocomplete list and when the user changes the input/updates the UI, trigger a form post to the server to get a page update.

Alternatively, it might be worth using a datalist element and an input with the list attribute.

[htmlsplash]

@javiercn Can you point me to docs on how to the post/submit method?

Please note, that in practice, our form might have many auto-complete lists and I only want to submit the form when the user clicks the search button.

[dotnet-policy-service[bot]]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.