[Sample] Add an example of an editable and validatable dialog box

[dvoituron]

[Sample] Add an example of an editable and validable dialog box

SimpleEditDialog.razor

@using System.ComponentModel.DataAnnotations
@implements IDialogContentComponent<SimpleEditDialog.RegisterContent>

<!-- Header -->
<FluentDialogHeader ShowDismiss="true">
    <FluentStack VerticalAlignment="VerticalAlignment.Center">
        <FluentIcon Value="@(new Icons.Regular.Size24.WindowApps())" />
        <FluentLabel Typo="Typography.PaneHeader">
            @Dialog.Instance.Parameters.Title
        </FluentLabel>
    </FluentStack>
</FluentDialogHeader>

<!-- Body -->
<FluentDialogBody>
    <EditForm EditContext="@_editContext" FormName="simple_register">
        <DataAnnotationsValidator />

        <FluentLabel Style="margin-bottom: 16px;">
            Your name must be between 3 and 20 characters long,
            and your age between 1 and 99.
        </FluentLabel>

        <FluentTextField Name="register_name"
                         @bind-Value="@Content.Name"
                         Label="Name"
                         Required />
        <FluentNumberField Name="register_age"
                           @bind-Value="@Content.Age"
                           Label="Age"
                           Required />

        <div style="color: var(--error);">
            <FluentValidationSummary />
        </div>
    </EditForm>
</FluentDialogBody>

<!-- Footer -->
<FluentDialogFooter>
    <FluentButton Appearance="Appearance.Accent"
                  Disabled="@(!_editContext.Validate())"
                  OnClick="@SaveAsync">
        Save
    </FluentButton>
    <FluentButton Appearance="Appearance.Neutral"
                  OnClick="@CancelAsync">
        Cancel
    </FluentButton>
</FluentDialogFooter>

@code
{
    private EditContext _editContext = default!;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; } = default!;

    [Parameter]
    public SimpleEditDialog.RegisterContent Content { get; set; } = default!;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(Content);
    }

    private async Task SaveAsync()
    {
        if (_editContext.Validate())
        {
            await Dialog.CloseAsync(Content);
        }
    }

    private async Task CancelAsync()
    {
        await Dialog.CancelAsync();
    }

    public record RegisterContent
    {
        public int Id { get; set; } = 0;

        [MinLength(3)]
        [MaxLength(20)]
        public string Name { get; set; } = string.Empty;

        [Range(1, 99)]
        public int Age { get; set; }
    }
}

DialogEditableExample.razor

@inject IDialogService DialogService

<FluentButton Appearance="Appearance.Accent" OnClick="@EditAsync">Edit</FluentButton>

<p>Name: @DialogData.Name - Age: @DialogData.Age</p>

@code
{
    SimpleEditDialog.RegisterContent DialogData { get; set; } = new() { Id = 1, Name = "Denis", Age = 24 };

    private async Task EditAsync()
    {
        // Create a new instance of DialogData
        // to allow the user to cancel the update
        var data = DialogData with { Id = 0 } ?? new();

        var dialog = await DialogService.ShowDialogAsync<SimpleEditDialog>(data, new DialogParameters()
            {
                Height = "400px",
                Title = $"Updating the {DialogData.Name} sheet",
                PreventDismissOnOverlayClick = true,
                PreventScroll = true,
            });

        var result = await dialog.Result;
        if (!result.Cancelled && result.Data != null)
        {
            DialogData = (SimpleEditDialog.RegisterContent)result.Data;
        }

    }
}

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1397.westeurope.3.azurestaticapps.net

[vnbaaij]

Nice!