p11 UI
true-perfect-code
Version: 1.1.69

P11MultiSelectBox Service

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

Required Configuration for P11MultiSelectBox

To use the P11MultiSelectBox 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 multi-selection box.


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

Interactive MultiSelect Box Playground

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

MultiSelect Box Configuration

Enter options separated by commas
Enter pre-selected 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 MultiSelect Box'

Implementation

Usage: P11MultiSelectBoxService Method

The MultiSelectAsync method provides a convenient way to display a multi-selection dialog and capture multiple user choices from predefined options.
Method Description Parameters Returns
MultiSelectAsync(List<string> valueList, string title, string label, string placeholderText, string description, List<string> defaultSelections, string textOk, string textCancel, bool labelVertical, string cssClassInput, string cssClassButtons) Displays a multi-selection dialog box to capture multiple user choices from predefined options.
  • valueList (List<string>): Required. The list of available options for selection.
  • title (string): Header title. Default: "Multi Selection"
  • label (string): Label for the selection field. Default: "User selection"
  • placeholderText (string): Placeholder text when no selection is made. Default: "Select items"
  • description (string): Additional description or hint text. Default: "Confirm selection with OK"
  • defaultSelections (List<string>): The pre-selected values. Default: empty list
  • 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<ICollection<string>> (Returns the user's selected string values as a collection, or empty collection if canceled.)

Underlying P11MultiSelectBox Component Properties

The MultiSelectAsync method internally uses the P11MultiSelectBox component with the following properties:
Property Type Default Description
ValueList List<string> null Gets or sets the list of available options for selection.
DefaultSelections List<string> empty list Gets or sets the pre-selected values from the ValueList.
Label string "User selection" Gets or sets the label for the selection field.
PlaceholderText string "Select items" 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<ICollection<string>> null (Internal) Callback that returns the result to the MessageBox service.
An unhandled error has occurred. Reload 🗙