P11 Blazor UI Library – Bootstrap 5.3 Components

P11InputBoxArea Service

The P11InputBoxArea is a specialized service component built on top of the P11MessageBox that provides a convenient way to capture multi-line text input from users through modal dialogs. It is designed for longer content such as comments, descriptions, notes, documentation or other text-based information.

Note: The P11InputBoxArea service requires the same setup as the P11MessageBox service. Make sure that the MessageBox service is correctly configured before using this component.

Required Configuration for P11InputBoxArea

To use the P11InputBoxArea 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 for service dialogs, needs to be added to your application's main layout.


// In Routes.razor or App.razor

<P11MessageBox />

3. Add the Namespace to _Imports.razor

To easily access the required types without using full namespaces, add:


// In _Imports.razor

@using p11.UI
@using p11.UI.Models

4. Inject the Service for Usage

Finally, inject the message box service into any component where you want to display a multi-line input dialog.


// In your .razor component

@inject IMessageBoxService MessageBoxService

Interactive Input Area Playground

Configure the parameters below and open a multi-line input dialog.

Input Area Configuration

Title

Label

Description

Default Value

Rows

OK Button Text

Cancel Button Text

Label Display Mode

Input CSS Class

Buttons CSS Class

Results:

Configure the parameters above and click 'Show Custom Input Area'

Implementation

<h3 class="h4 mb-4">
    @AppState!.T("Usage: P11InputBoxArea Service Method")
</h3>

<div class="alert alert-info">

    <i class="bi bi-info-circle me-2"></i>

    @((MarkupString)AppState!.T(
                "The <code>TextAreaAsync</code> method provides a convenient way to display a multi-line text dialog and capture longer user input."
                ))

</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">

            <table class="table table-striped mb-0">
                <thead class="table-light">
                    <tr>
                        <th>
                            @AppState!.T("Method")
                        </th>
                        <th>
                            @AppState!.T("Description")
                        </th>
                        <th>
                            @AppState!.T("Parameters")
                        </th>
                        <th>
                            @AppState!.T("Returns")
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <code>
                                TextAreaAsync(string title, string label, string description, string defaultValue, int rows, string textOk, string textCancel, InputLabelDisplayMode inputLabelDisplayMode, string cssClassInput, string cssClassButtons)
                            </code>
                        </td>
                        <td>
                            Displays a multi-line text input dialog box.
                        </td>
                        <td>
                            <ul>
                                <li>
                                    <code>title</code>:
                                    Dialog header title. Default:
                                    <code>"Input"</code>
                                </li>
                                <li>
                                    <code>label</code>:
                                    Textarea label. Default:
                                    <code>"User input"</code>
                                </li>
                                <li>
                                    <code>description</code>:
                                    Additional description text.
                                </li>
                                <li>
                                    <code>defaultValue</code>:
                                    Initial textarea value.
                                </li>
                                <li>
                                    <code>rows</code>:
                                    Number of visible rows. Default:
                                    <code>5</code>
                                </li>
                                <li>
                                    <code>textOk</code>:
                                    OK button text.
                                </li>
                                <li>
                                    <code>textCancel</code>:
                                    Cancel button text.
                                </li>
                                <li>
                                    <code>inputLabelDisplayMode</code>:
                                    Label position.
                                </li>
                                <li>
                                    <code>cssClassInput</code>:
                                    CSS class for textarea container.
                                </li>
                                <li>
                                    <code>cssClassButtons</code>:
                                    CSS class for buttons.
                                </li>
                            </ul>
                        </td>
                        <td>
                            <code>
                                Task&lt;string?&gt;
                            </code>

                            <br />

                            Returns entered text or empty value when canceled.

                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private string consoleoutput = "Configure the parameters above and click 'Show Custom Input Area'";
    private InputBoxAreaConfig config = new();

    private class InputBoxAreaConfig
    {
        public string Title { get; set; } = "Enter Description";
        public string Label { get; set; } = "Description";
        public string Description { get; set; } = "Please enter a longer text";
        public string DefaultValue { get; set; } = "";
        public int Rows { get; set; } = 8;
        public string TextOk { get; set; } = "OK";
        public string TextCancel { get; set; }  = "Cancel";
        public InputLabelDisplayMode InputLabelDisplayMode { get; set; }  = InputLabelDisplayMode.Vertical;
        public string CssClassInput { get; set; } = "p-3";
        public string CssClassButtons { get; set; }  = "d-flex w-100 gap-3 mt-3";
    }

    private async Task ShowCustomInputArea()
    {
        await Task.Delay(30);

        StateHasChanged();

        string? result =
            await MessageBoxService.InputAreaAsync(
                title: config.Title,
                label: config.Label,
                description: config.Description,
                defaultValue: config.DefaultValue,
                rows: config.Rows,
                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 area or entered nothing.";
        }

        StateHasChanged();
    }

    private void ResetToDefaults()
    {
        config = new InputBoxAreaConfig();
        consoleoutput = "Parameters reset to defaults. Click 'Show Custom Input Area' to test.";

        StateHasChanged();
    }
}

Usage: P11InputBoxArea Service Method

The TextAreaAsync method provides a convenient way to display a multi-line text dialog and capture longer user input.

Method	Description	Parameters	Returns
`TextAreaAsync(string title, string label, string description, string defaultValue, int rows, string textOk, string textCancel, InputLabelDisplayMode inputLabelDisplayMode, string cssClassInput, string cssClassButtons)`	Displays a multi-line text input dialog box.	`title`: Dialog header title. Default: `"Input"` `label`: Textarea label. Default: `"User input"` `description`: Additional description text. `defaultValue`: Initial textarea value. `rows`: Number of visible rows. Default: `5` `textOk`: OK button text. `textCancel`: Cancel button text. `inputLabelDisplayMode`: Label position. `cssClassInput`: CSS class for textarea container. `cssClassButtons`: CSS class for buttons.	`Task<string?>` Returns entered text or empty value when canceled.

Underlying P11InputBoxArea Component Properties

The TextAreaAsync method internally creates the P11InputBoxArea component with the following properties:

Property	Type	Default	Description
`Label`	`string`	`"User input"`	Textarea label.
`Description`	`string`	`"Confirm entry with OK"`	Description text below textarea.
`Rows`	`int`	`5`	Number of visible textarea rows.
`TextOk`	`string`	`"Ok"`	OK button caption.
`TextCancel`	`string`	`"Cancel"`	Cancel button caption.
`InputLabelDisplayMode`	`InputLabelDisplayMode`	`Vertical`	Controls label positioning.
`CssClassInput`	`string`	`"p-1"`	Textarea container CSS class.
`CssClassButtons`	`string`	`"d-flex w-100 gap-4 mt-4"`	Button container CSS class.
`OnResult`	`Action<string?>`	`null`	(Internal) Callback returning the result to the MessageBox service.