Would like to get help with FluentSelect and binding

[mrThirsty]

Hi,

I have a form for editing an object with an Int property, this property describes a Foreign Key in the database so it expects an int ID value from another list of objects. IE:

class FormItem
{
public int FK_ID { get;set;}
}

class ListItem
{
public int Id {get;set; }
public string Label { get;set;}
}

my blazor component has a FluentSelect:

<FluentSelect name="ItemSelect" TOption="ListItem" Items="SelectItems" OptionValue="@(i => i.Id)" OptionText="@(i => i.Label)" @bind-Value="@Content.FK_ID " Label="Select Item" Required/>

@code {
public FormItem Content { get;set; }
public List SelectItems { get;set; }
}

When using the above, the compiler complains: cannot convert 'int' to 'string' on the bind-Value parameter and OptionValue. What is the best approach to wire this up correctly?

I am not able to change the model for FormItem and ListItem as they are provided by an external API that I have no control over.

[dvoituron]

Did you already tried to use the @bind-SelectedOption attribute ?

[mrThirsty]

I did, but then it expects the property to be ListItem not int, unfortunately the FormItem doesn't have this property.

I know I can build out my own objects or extend the FormItem type but I am hoping I am just doing the setup of FluentSelect wrong and it does support my approach before trying to build out an intermediate layer between the API objects and my UI.

[vnbaaij]

As noted in the docs (https://www.fluentui-blazor.net/Select), the Value is (currently) always a string. You'll need to use either the strongly typed SelecectedOption or create an intermediary string (IdAsString) field in your FormItem class that uses custom get and set to do conversion from/to int.

[mrThirsty]

Thanks, both solutions require a change to FormItem which I can't do as I don't have access to that as they are provided by an external API that is not mine.

Will need to build an intermediate data layer between the API I am using and my UI.

[dvoituron]

The next version v5 will include this possibility of linking an TOption? element.
See https://fluentui-blazor-v5.azurewebsites.net/List/Select (the UI is not yet finished)

[vnbaaij]

This is not an issue. Converted to discussion item and fixed the title 😉