Blazor Select List Components

Select List Component

Description

A Blazor select list component styled using Bootstrap 5. This component uses reflection and a generic list of objects to create a <select> element and nested <option> elements.

How To Run

• Make sure to have .net 7 framework runtime installed on your machine
• Make sure to have dotnet cli installed
• Run dotnet run from inside of the BlazorSelectList directory

Example

 <SelectListCustom 
    Data=People
    TextKey="Name"
    ValueKey="Id"
    DefaultText="-- Select a Person --"
    DefaultValue="-1"
    SelectedOptionByValue="2"
    Name="People">
</SelectListCustom>

Attributes

Attribute	Desc	Required?
Data	List of generic objects. Example: var People = List<Person>.	Y
ValueKey	Object property key that assigns each option's value attribute. Example: <option value={ValueKey.Value}>...	Y
TextKey	Object property key that assigns each option's text value. Example: <option ...>{TextKey.Value}>....	Y
DefaultText	Prepends a new option element and assigns the options text value.	N
DefaultValue	Sets the prepended option element's value.	N
SelectedOptionByValue	Sets an option element to 'selected' by a matching option value attribute.	N

Select List JSON Component

Description

This component works similarly to the select list component but handles a serialized JSON string instead of a list of generic C# objects.Deserialization the JSON string uses C# JSON DOM and JsonNode.

Example

<SelectListJson 
    JsonData=@PeopleJson 
    TextKey="Name" 
    ValueKey="Id" 
    DefaultText="-- Select a Person --" 
    DefaultValue="-1"
    SelectedOptionByValue="2">
</SelectListJson>

Attributes

Attribute	Desc	Required?
Data	Serialized JSON array. Must be a single-dimensional array of objects. Example: "[{Id:1, Name: "Bob Smit},...]"	Y
ValueKey	Object property key that assigns each options value attributes value. Example: <option value={ValueKey.Value}>.... The value must not be undefined or null.	Y
TextKey	Object property key that assigns each option's text value. Example: <option ...>{TextKey.Value}>.... The value must not be undefined or null.	Y
DefaultText	Prepends a new option element and assigns the option's text value	N
DefaultValue	Sets the prepended option element's value.	N
SelectedOptionByValue	Sets an option element to 'selected' by a matching option value attribute	N