p11 UI
true-perfect-code
Version: 1.1.69

P11SelectBox Service

The P11SelectBox is a specialized service component built on top of the P11MessageBox that provides a convenient way to present users with a selection of predefined options through modal dialogs. It's ideal for scenarios where users need to choose from a list of values, such as categories, statuses, or any predefined set of options.
Note: The P11SelectBox service requires the same setup as the P11MessageBox service. Make sure you have completed the configuration steps below.

Required Configuration for P11SelectBox

To use the P11SelectBox service, you must perform the same setup steps as for the P11MessageBox service:

1. Register the Service in Program.cs

The IMessageBoxService must be registered in the dependency injection container.


// In Program.cs (Blazor Server or Blazor WebAssembly)
builder.Services.AddScoped<IMessageBoxService, MessageBoxService>();
2. Add the Component to your Layout

The P11MessageBox component, which acts as the container, needs to be added to your application's main layout file (e.g., Routes.razor or App.razor).


// In Routes.razor
<Router AppAssembly="typeof(Layout.MainLayout).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
    <FocusOnNavigate RouteData="routeData" Selector="h1" />
  </Found>
</Router>

<P11MessageBox />
3. Add the Namespace to _Imports.razor

To easily access the component without a full namespace, add the following line:


// In _Imports.razor
@using p11.UI
@using p11.UI.Models
4. Inject the Service for Usage

Finally, inject the service into any component where you want to display a selection box.


// In your .razor component or its code-behind
@inject IMessageBoxService MessageBoxService

Interactive Select Box Playground

Use the controls below to customize the SelectBox parameters and see the result in real-time.

Select Box Configuration

Enter options separated by commas
When checked, label appears above the select; when unchecked, label and select are horizontal.
Results:
Configure the parameters above and click 'Show Custom Select Box'

Implementation

<h3 class="h4 mb-4">Interactive Select Box Playground</h3>
<p>Use the controls below to customize the SelectBox parameters and see the result in real-time.</p>

<div class="bg-light p-4 rounded mb-4">
    <h4 class="mb-3">Select Box Configuration</h4>

    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <label class="form-label">Available Options (comma-separated)</label>
            <input @bind="optionsInput" class="form-control" placeholder="Option 1, Option 2, Option 3" />
            <small class="form-text text-muted">Enter options separated by commas</small>
        </div>
        <div class="col-md-6">
            <label class="form-label">Default Selection</label>
            <input @bind="config.DefaultSelection" class="form-control" placeholder="Pre-selected option" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Title</label>
            <input @bind="config.Title" class="form-control" placeholder="Enter dialog title" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Label</label>
            <input @bind="config.Label" class="form-control" placeholder="Enter selection label" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Placeholder Text</label>
            <input @bind="config.PlaceholderText" class="form-control" placeholder="Enter placeholder text" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Description</label>
            <input @bind="config.Description" class="form-control" placeholder="Enter description" />
        </div>
        <div class="col-md-6">
            <label class="form-label">OK Button Text</label>
            <input @bind="config.TextOk" class="form-control" placeholder="Enter OK button text" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Cancel Button Text</label>
            <input @bind="config.TextCancel" class="form-control" placeholder="Enter Cancel button text" />
        </div>
        <div class="col-md-6">
            <div class="form-check mt-4">
                <input class="form-check-input" type="checkbox" @bind="config.LabelVertical" id="labelVerticalCheckbox" />
                <label class="form-check-label" for="labelVerticalCheckbox">
                    Display Label Vertically
                </label>
            </div>
            <small class="form-text text-muted">When checked, label appears above the select; when unchecked, label and select are horizontal.</small>
        </div>
        <div class="col-md-6">
            <label class="form-label">Input CSS Class</label>
            <input @bind="config.CssClassInput" class="form-control" placeholder="Enter CSS class for input" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Buttons CSS Class</label>
            <input @bind="config.CssClassButtons" class="form-control" placeholder="Enter CSS class for buttons" />
        </div>
    </div>

    <div class="d-flex flex-wrap gap-2 align-items-center">
        <button class="btn btn-primary" @onclick="ShowCustomSelectBox">Show Custom Select Box</button>
        <button class="btn btn-outline-secondary" @onclick="ResetToDefaults">Reset to Defaults</button>
    </div>

    <div class="mt-3">Results:</div>
    <div class="d-flex flex-column gap-2 mt-2">
        <div class="alert alert-info">@consoleoutput</div>
    </div>
</div>
@code {
    private string consoleoutput = "Configure the parameters above and click 'Show Custom Select Box'";
    private string optionsInput = "Red, Green, Blue, Yellow, Orange";

    private SelectBoxConfig config = new SelectBoxConfig();

    private class SelectBoxConfig
    {
        public string Title { get; set; } = "Make a Selection";
        public string Label { get; set; } = "Choose an option";
        public string PlaceholderText { get; set; } = "Select an item";
        public string Description { get; set; } = "Please choose one of the available options";
        public string DefaultSelection { get; set; } = "Green";
        public string TextOk { get; set; } = "Select";
        public string TextCancel { get; set; } = "Cancel";
        public bool LabelVertical { get; set; } = true;
        public string CssClassInput { get; set; } = "p-3";
        public string CssClassButtons { get; set; } = "d-flex w-100 gap-3 mt-3";
    }

    private List<string> GetOptionsList()
    {
        return optionsInput?
            .Split(',', StringSplitOptions.RemoveEmptyEntries)
            .Select(option => option.Trim())
            .Where(option => !string.IsNullOrEmpty(option))
            .ToList() ?? new List<string>();
    }

    private async Task ShowCustomSelectBox()
    {
        var options = GetOptionsList();
        if (!options.Any())
        {
            consoleoutput = "Please enter at least one option in the 'Available Options' field.";
            StateHasChanged();
            return;
        }

        await Task.Delay(30);
        StateHasChanged();

        string result = await MessageBoxService.SelectAsync(
            valueList: options,
            title: config.Title,
            label: config.Label,
            placeholderText: config.PlaceholderText,
            description: config.Description,
            defaultSelection: config.DefaultSelection,
            textOk: config.TextOk,
            textCancel: config.TextCancel,
            labelVertical: config.LabelVertical,
            cssClassInput: config.CssClassInput,
            cssClassButtons: config.CssClassButtons
        );

        if (!string.IsNullOrEmpty(result))
        {
            consoleoutput = $"User selected: '{result}'";
        }
        else
        {
            consoleoutput = "User canceled the selection or made no choice.";
        }

        StateHasChanged();
    }

    private void ResetToDefaults()
    {
        config = new SelectBoxConfig();
        optionsInput = "Red, Green, Blue, Yellow, Orange";
        consoleoutput = "Parameters reset to defaults. Click 'Show Custom Select Box' to test.";
        StateHasChanged();
    }
}

Usage: P11SelectBoxService Method

The SelectAsync method provides a convenient way to display a selection dialog and capture user choice from predefined options.
Method Description Parameters Returns
SelectAsync(List<string> valueList, string title, string label, string placeholderText, string description, string defaultSelection, string textOk, string textCancel, bool labelVertical, string cssClassInput, string cssClassButtons) Displays a selection dialog box to capture user choice from predefined options.
  • valueList (List<string>): Required. The list of available options for selection.
  • title (string): Header title. Default: "Selection"
  • label (string): Label for the selection field. Default: "User selection"
  • placeholderText (string): Placeholder text when no selection is made. Default: "Select an item"
  • description (string): Additional description or hint text. Default: "Confirm selection with OK"
  • defaultSelection (string): The pre-selected value. Default: empty string
  • textOk (string): Text for the OK button. Default: "Ok"
  • textCancel (string): Text for the Cancel button. Default: "Cancel"
  • labelVertical (bool): When true, label appears above select; when false, label and select are horizontal. Default: false
  • cssClassInput (string): CSS class for the input container. Default: "p-1"
  • cssClassButtons (string): CSS class for the buttons container. Default: "d-flex w-100 gap-4 mt-4"
 Task<string> (Returns the user's selected string value, or empty string if canceled.)

Underlying P11SelectBox Component Properties

The SelectAsync method internally uses the P11SelectBox component with the following properties:
Property Type Default Description
ValueList List<string> null Gets or sets the list of available options for selection.
DefaultSelection string "" Gets or sets the pre-selected value from the ValueList.
Label string "User selection" Gets or sets the label for the selection field.
PlaceholderText string "Select an item" Gets or sets the placeholder text displayed when no selection is made.
Description string "Confirm selection with OK" Gets or sets additional description or hint text displayed below the selection field.
TextOk string "Ok" Gets or sets the text for the OK button.
TextCancel string "Cancel" Gets or sets the text for the Cancel button.
LabelVertical bool false Gets or sets whether the label appears above the select field (true) or horizontally next to it (false).
CssClassInput string "p-1" Gets or sets the CSS class for the input container.
CssClassButtons string "d-flex w-100 gap-4 mt-4" Gets or sets the CSS class for the buttons container.
OnResult Action<string> null (Internal) Callback that returns the result to the MessageBox service.
An unhandled error has occurred. Reload 🗙