[SOLVED] How to extend SelectList to have a default NullValueText

[gac-noob]

Hi,

I am new to Blazor and Blazorise, and I am currently experimenting with <SelectList> for the user to select from a list of records (i.e. list of contacts, or list of items, etc...) by the way, I am using int? because I planning to allow users to save drafts, which will allow them to save even if contact is not yet selected or null.

Anyway, this is what my code looks like:

<SelectList TItem="Contact"
            TValue="int?"
            Data="@ContactList"
            TextField="@(i => i.Name)"
            ValueField="@(i => i.Id)"
            SelectedValue="@Order.ContactId"
            SelectedValueChanged="@((v) => OnContactValueChanged(v))" />

@code {
    public void OnContactValueChanged(int? selectedContactId)
    {
        Order.ContactId = selectedContactId;
    }
} 

My problem is:

1. Am I using the right component? or should I use <DropdownList>?
2. When adding a new record, Order.ContactId starts with null, but the <SelectList> displays the 1st item on the list. How do I put a Placeholder for NullValue such as "Please select a contact"? If this is not possible, any suggestions on how to handle this? Maybe I should initialize Order.ContactId to the Id of the 1st item of the <SelectList>?
3. Can I use <Validations> with <SelectList> to check for nulls?

Finally, feel free to correct my ways if I am doing this all wrong, I am willing to learn! :)

[stsrki]

Hi, thanks for tying out the Blazorise.

1. Select list is the right component for somewhat larger lists. Dropdown, from a UX perspective, should only be used for small menus.
2. The only way currently is to add dummy item into your data list that will be at index 0.
3. <Validations> should work just fine with a select list

There could be some problems with 2.. Browsers are not good with null or empty values when used in <option> element. For example if you have <SelectItem Value="null">"Please select a country"<SelectItem> it will get translated into something like:

The problem here is that element onchange will return "Please select a country" as an option value. This is just how browsers work and there is no way around it, for now. So instead of using null it's better to use some other value, like -1 for example. But in that case, you should do the conversion manually each time you read from or write to select list, or your backend.

[gac-noob]

Wow! Thank you sir Mladen, you explain things very very well.
I think to keep things simple, I'll just avoid using nullable int... :)