p11 UI
true-perfect-code
Version: 1.1.69

P11InputBox Service

The P11InputBox is a specialized service component built on top of the P11MessageBox that provides a convenient way to capture text input from users through modal dialogs. It's ideal for scenarios where you need to prompt users for information, such as names, descriptions, or any textual data.
Note: The P11InputBox service requires the same setup as the P11MessageBox service. Make sure you have completed the configuration steps below.

Required Configuration for P11InputBox

To use the P11InputBox 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 an input box.


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

Interactive Input Box Playground

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

Input Box Configuration

Results:
Configure the parameters above and click 'Show Custom Input Box'

Implementation

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

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

    <div class="row g-3 mb-4">
        <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 input label" />
        </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">Default Value</label>
            <input @bind="config.DefaultValue" class="form-control" placeholder="Enter default value" />
        </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">
            <label class="form-label">Label Display Mode</label>
            <select @bind="config.InputLabelDisplayMode" class="form-select">
                <option value="FloatingLabel">Floating Label</option>
                <option value="Horizontal">Horizontal</option>
                <option value="Vertical">Vertical</option>
            </select>
        </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="ShowCustomInputBox">Show Custom Input 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 Input Box'";

    private InputBoxConfig config = new InputBoxConfig();

    private class InputBoxConfig
    {
        public string Title { get; set; } = "Enter Information";
        public string Label { get; set; } = "Your Input";
        public string Description { get; set; } = "Please provide the required information";
        public string DefaultValue { get; set; } = "";
        public string TextOk { get; set; } = "OK";
        public string TextCancel { get; set; } = "Cancel";
        public InputLabelDisplayMode InputLabelDisplayMode { get; set; } = InputLabelDisplayMode.FloatingLabel;
        public string CssClassInput { get; set; } = "p-3";
        public string CssClassButtons { get; set; } = "d-flex w-100 gap-3 mt-3";
    }

    private async Task ShowCustomInputBox()
    {
        await Task.Delay(30);
        StateHasChanged();

        string result = await MessageBoxService.InputAsync(
            title: config.Title,
            label: config.Label,
            description: config.Description,
            defaultValue: config.DefaultValue,
            textOk: config.TextOk,
            textCancel: config.TextCancel,
            inputLabelDisplayMode: config.InputLabelDisplayMode,
            cssClassInput: config.CssClassInput,
            cssClassButtons: config.CssClassButtons
        );

        if (!string.IsNullOrEmpty(result))
        {
            consoleoutput = $"User entered: '{result}'";
        }
        else
        {
            consoleoutput = "User canceled the input or entered nothing.";
        }

        StateHasChanged();
    }

    private void ResetToDefaults()
    {
        config = new InputBoxConfig();
        consoleoutput = "Parameters reset to defaults. Click 'Show Custom Input Box' to test.";
        StateHasChanged();
    }
}

Usage: P11InputBoxService Method

The InputAsync method provides a convenient way to display an input dialog and capture text input from the user.
Method Description Parameters Returns
InputAsync(string title, string label, string description, string defaultValue, string textOk, string textCancel, bool inputLabelDisplayMode, string cssClassInput, string cssClassButtons) Displays an input dialog box to capture text input from the user.
  • title (string): Header title. Default: "Input"
  • label (string): Label for the input field. Default: "User input"
  • description (string): Additional description or hint text. Default: "Confirm entry with OK"
  • defaultValue (string): The default value for the input field. Default: empty string
  • textOk (string): Text for the OK button. Default: "Ok"
  • textCancel (string): Text for the Cancel button. Default: "Cancel"
  • inputLabelDisplayMode (bool): Sets label position for the input field. Default: floating
  • 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 input string, or empty string if canceled.)

Underlying P11InputBox Component Properties

The InputAsync method internally uses the P11InputBox component with the following properties:
Property Type Default Description
Label string "User input" Gets or sets the label for the input field.
Description string "Confirm entry with OK" Gets or sets additional description or hint text displayed below the input 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.
InputLabelDisplayMode InputLabelDisplayMode FloatingLabel Gets or sets label position for the input field (floating, horizontal or vertical).
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 🗙