dotnet/aspnetcore

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

htmlsplash opened this issue · 3 comments

Is there an existing issue for this?

  • 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.

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?

  1. 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