P11Select Component

The P11Select component provides a single-selection dropdown list, wrapping the native HTML <select> element. It integrates Bootstrap's .form-select class for modern styling and offers flexible options for data binding, placeholder text, and accessibility.

Note: You can populate options either by providing an Items collection along with ItemValueExpression/ItemTextExpression (recommended for type safety and AOT) or by using ItemValueField/ItemTextField (less type-safe). Alternatively, you can define options manually using ChildContent.

P11Select Component Examples

These examples demonstrate various configurations and functionalities of the P11Select component, showcasing its flexibility for different use cases.

1. Standard Usage with List of Objects

Selecting a name from a list of Person objects.

Select a person:

Selected Person ID: Nothing selected

Implementation


<label for="personSelect" class="form-label">Wähle eine Person:</label>
<P11Select TItem="Person" TValue="int?"
           Id="personSelect"
           @bind-Value="selectedPersonId"
           Items="people"
           ItemValueExpression="p => p.Id"
           ItemTextExpression="p => p.Name"
           PlaceholderText="-- Bitte wählen --"
           AriaLabel="Person auswählen Dropdown"
           CssClass="form-select-lg">
</P11Select>
<p class="mt-2">Ausgewählte Person ID: <strong>@(selectedPersonId.HasValue? selectedPersonId.ToString() : "Nichts ausgewählt")</strong></p>


private int? selectedPersonId;

private List<Person> people = new List<Person>
{
    new Person { Id = 1, Name = "Alice", City = "New York" },
    new Person { Id = 2, Name = "Bob", City = "London" },
    new Person { Id = 3, Name = "Charlie", City = "Paris" },
    new Person { Id = 4, Name = "Diana", City = "Berlin" }
};

public class Person
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public string? City { get; set; }
}

2. Usage with Enum

Selecting a priority from an enum.

Select a priority:

Selected Priority: Nothing selected

Implementation


<label for="prioritySelect" class="form-label">Wähle eine Priorität:</label>
<P11Select TItem="Priority" TValue="Priority?"
           Id="prioritySelect"
           @bind-Value="selectedPriority"
           Items="@Enum.GetValues<Priority>()"
           ItemValueExpression="p => p"
           ItemTextExpression="p => p.ToString()"
           PlaceholderText="-- Wähle Priorität --"
           AriaLabel="Priorität auswählen Dropdown">
</P11Select>
<p class="mt-2">Ausgewählte Priorität: <strong>@(selectedPriority.HasValue? selectedPriority.ToString() : "Nichts ausgewählt")</strong></p>


public enum Priority
{
    Low,
    Medium,
    High,
    Urgent
}

private Priority? selectedPriority;

3. Manual Options (ChildContent)

Direct rendering of <option> tags within the component.

Select a city:

Selected City: Nothing selected

Implementation


<label for="citySelect" class="form-label">Wähle eine Stadt:</label>
<P11Select TItem="string" TValue="string"
           Id="citySelect"
           @bind-Value="selectedCity"
           PlaceholderText="Wähle eine Stadt manuell"
           AriaLabel="Stadt auswählen Dropdown">
    <option value="BER">Berlin</option>
    <option value="MUN">München</option>
    <option value="HAM">Hamburg</option>
    <option value="COL">Köln</option>
</P11Select>
<p class="mt-2">Ausgewählte Stadt: <strong>@(string.IsNullOrEmpty(selectedCity) ? "Nichts ausgewählt" : selectedCity)</strong></p>


private string? selectedCity;

4. Disabled Select

A select field that is not interactive.

Disabled Selection:

Disabled Selection: 2

Implementation


<label for="disabledSelect" class="form-label">Deaktivierte Auswahl:</label>
<P11Select TItem="Person" TValue="int?"
           Id="disabledSelect"
           @bind-Value="disabledSelectedPersonId"
           Items="people"
           ItemValueExpression="p => p.Id"
           ItemTextExpression="p => p.Name"
           IsDisabled="true"
           PlaceholderText="Auswahl deaktiviert"
           AriaLabel="Deaktiviertes Person Dropdown">
</P11Select>
<p class="mt-2">Deaktivierte Auswahl: <strong>@(disabledSelectedPersonId.HasValue? disabledSelectedPersonId.ToString() : "Nichts ausgewählt")</strong></p>


private int? disabledSelectedPersonId = 2; // Pre-selected for disabled example

5. Validation in EditForm

Demonstrates integration with Blazor's EditForm and validation mechanisms.

Implementation


<EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit2" OnInvalidSubmit="HandleInvalidSubmit2">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="mb-3">
        <label for="requiredPersonSelect" class="form-label">Pflichtfeld Person:</label>
        <P11Select TItem="Person" TValue="int?"
                   Id="requiredPersonSelect"
                   @bind-Value="validationModel.SelectedRequiredPersonId"
                   Items="people"
                   ItemValueExpression="p => p.Id"
                   ItemTextExpression="p => p.Name"
                   PlaceholderText="-- Pflichtfeld wählen --"
                   AriaLabel="Pflichtfeld Person Dropdown">
        </P11Select>
        <ValidationMessage For="@(() => validationModel.SelectedRequiredPersonId)" />
    </div>

    <div class="mb-3">
        <label for="requiredPrioritySelect" class="form-label">Pflichtfeld Priorität:</label>
        <P11Select TItem="Priority" TValue="Priority?"
                   Id="requiredPrioritySelect"
                   @bind-Value="validationModel.SelectedRequiredPriority"
                   Items="@Enum.GetValues<Priority>()"
                   ItemValueExpression="p => p"
                   ItemTextExpression="p => p.ToString()"
                   PlaceholderText="-- Pflichtfeld wählen --"
                   AriaLabel="Pflichtfeld Priorität Dropdown">
        </P11Select>
        <ValidationMessage For="@(() => validationModel.SelectedRequiredPriority)" />
    </div>

    <button type="submit" class="btn btn-primary">Formular absenden</button>
    <p class="mt-2">Validierungsstatus: <strong>@validationStatus</strong></p>
</EditForm>


private ValidationTestModel validationModel = new ValidationTestModel();
private string validationStatus = "Warten auf Absenden...";

private void HandleValidSubmit2()
{
    validationStatus = "Formular ist GÜLTIG!";
    Console.WriteLine($"Validierung erfolgreich. Person: {validationModel.SelectedRequiredPersonId}, Priorität: {validationModel.SelectedRequiredPriority}");
}

private void HandleInvalidSubmit2()
{
    validationStatus = "Formular ist UNGÜLTIG!";
    Console.WriteLine("Validierung fehlgeschlagen.");
}

public class ValidationTestModel
{
    [Required(ErrorMessage = "Bitte wählen Sie eine Person aus.")]
    public int? SelectedRequiredPersonId { get; set; }

    [Required(ErrorMessage = "Bitte wählen Sie eine Priorität aus.")]
    public Priority? SelectedRequiredPriority { get; set; }
}

6. OnChanged Event Example

This example demonstrates how to use the OnChanged event to react to changes in the selected value. The current selection is displayed immediately after a change.

Select a fruit:

Selected Fruit (via OnChanged): None

Implementation


<label for="fruitSelect" class="form-label">Wähle eine Frucht:</label>
<P11Select TItem="string" TValue="string"
           Id="fruitSelect"
           @bind-Value="selectedFruit" <!-- CHANGED TO @bind-Value -->
           OnChanged="@OnFruitChanged"
           Items="fruitOptions"
           ItemValueExpression="f => f"
           ItemTextExpression="f => f"
           PlaceholderText="-- Wähle eine Frucht --"
           AriaLabel="Frucht auswählen Dropdown">
</P11Select>
<p class="mt-2">Ausgewählte Frucht (via OnChanged): <strong>@(selectedFruit ?? "None")</strong></p>
@if (!string.IsNullOrEmpty(fruitChangedMessage))
{
    <p class="text-info">@fruitChangedMessage</p>
}


private string? selectedFruit;
private string? fruitChangedMessage;

private List<string> fruitOptions = new() { "Apple", "Banana", "Orange", "Grape" };

private void OnFruitChanged(string? newFruit)
{
    // selectedFruit ist bereits durch @bind-Value aktualisiert,
    // aber wir können den Wert hier für zusätzliche Logik nutzen
    fruitChangedMessage = $"Frucht geändert zu: {newFruit ?? "Nichts"} um {DateTime.Now:HH:mm:ss}";
    Console.WriteLine($"Fruit changed to: {newFruit}");
}

Component API

Parameter	Type	Default	Description
`Items`	`IEnumerable<TItem>?`	`null`	Gets or sets the collection of items to display in the component.
`ItemValueExpression`	`Expression<Func<TItem, TValue>>?`	`null`	Gets or sets an expression that specifies how to extract the value from an item of type `TItem`. This is type-safe and preferred for AOT/trimming compatibility.
`ItemTextExpression`	`Expression<Func<TItem, string>>?`	`null`	Gets or sets an expression that specifies how to extract the display text from an item of type `TItem`. This is type-safe and preferred for AOT/trimming compatibility.
`ItemValueField`	`string?`	`null`	Gets or sets the name of the property in `TItem` to use as the value for each item. Use `ItemValueExpression` for better type safety and AOT/trimming compatibility.
`ItemTextField`	`string?`	`null`	Gets or sets the name of the property in `TItem` to use as the display text for each item. Use `ItemTextExpression` for better type safety and AOT/trimming compatibility.
`Id`	`string?`	`null`	Gets or sets the HTML 'id' attribute for the select element.
`Name`	`string?`	`null`	Gets or sets the HTML 'name' attribute for the select element.
`CssClass`	`string?`	`null`	Gets or sets additional CSS classes to apply to the select element.
`IsDisabled`	`bool`	`false`	Gets or sets a value indicating whether the select element is disabled.
`AriaLabel`	`string?`	`null`	Gets or sets the ARIA label for accessibility, providing a descriptive label for screen readers.
`Title`	`string?`	`null`	Gets or sets the HTML 'title' attribute for the select element, providing a tooltip on hover.
`PlaceholderText`	`string?`	`null`	Gets or sets the text for a default placeholder option in the select element.
`PlaceholderValue`	`string`	`string.Empty`	Gets or sets the value for the default placeholder option.
`PlaceholderIsDisabled`	`bool`	`true`	Gets or sets a value indicating whether the placeholder option should be disabled.
`NoOptionsText`	`string`	`\"No options available\"`	Gets or sets the text to display when no options are available in the select element.
`ChildContent`	`RenderFragment?`	`null`	Gets or sets the content to render inside the select element, typically used for custom option elements or when manually providing `<option>` tags.
`SkipValidation`	`bool`	`false`	Gets or sets a value indicating whether to skip internal configuration validation checks.
Events
`OnChanged`	`EventCallback<TValue>`	-	Gets or sets the custom event callback for when the selected value changes. This allows consumers to react to changes, similar to a standard 'onChange' event.