[Dialog] Add event before closing panel to allow validation of the data provided by the user

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -3659,6 +3659,14 @@
             This method is only called when using the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.IDialogService"/>.
             </remarks>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.DialogParameters.OnDialogValidation">
+            <summary>
+            Function that is called and awaited before the dialog is closed.
+            </summary>
+            <remarks>
+            This is a suitable callback to use when you need to validate the data in the dialog <em>before</em> it closes.
+            </remarks>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.DialogParameters`1">
             <summary>
             Parameters for a dialog.

examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor

@@ -0,0 +1,6 @@
+@inject IDialogService DialogService
+@inject IMessageService MessageService
+
+<FluentButton @onclick="@OpenPanelRightAsync" Appearance="Appearance.Accent">
+    Open panel (&gt;&gt;)
+</FluentButton>

examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs

@@ -0,0 +1,58 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using FluentUI.Demo.Shared.SampleData;
+using Microsoft.FluentUI.AspNetCore.Components;
+
+namespace FluentUI.Demo.Shared.Pages.Panel.Examples;
+public partial class DialogPanelWithValidation
+{
+    private IDialogReference? _dialog;
+
+    private readonly SimplePerson simplePerson = new()
+    {
+        Firstname = "Steve",
+        Lastname = "Roth",
+        Age = 42,
+    };
+
+    private async Task OpenPanelRightAsync()
+    {
+        DemoLogger.WriteLine($"Open right panel");
+
+        MessageService.Clear();
+
+        _dialog = await DialogService.ShowPanelAsync<SimplePanel>(simplePerson, new DialogParameters<SimplePerson>()
+        {
+            Content = simplePerson,
+            Alignment = HorizontalAlignment.Right,
+            Title = $"Hello {simplePerson.Firstname}",
+            PrimaryAction = "Yes",
+            SecondaryAction = "No",
+            PreventDismissOnOverlayClick = true,
+            OnDialogValidation = () =>
+            {
+                var result = simplePerson.Firstname.Length > 0 && simplePerson.Lastname.Length > 0;
+
+                if (!result)
+                {
+                    DemoLogger.WriteLine("Panel cannot be closed because of validation errors.");
+
+                    MessageService.ShowMessageBar(options =>
+                    {
+                        options.Intent = MessageIntent.Error;
+                        options.Title = "Validation error";
+                        options.Body = "First name and last name cannot be empty";
+                        options.Timestamp = DateTime.Now;
+                        options.Section = App.MESSAGES_DIALOG;
+                    });
+                }
+
+                return result;
+            }
+        });
+
+        DialogResult result = await _dialog.Result;
+    }
+}

examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor

@@ -1,5 +1,7 @@
 @implements IDialogContentComponent<SimplePerson>
 
+<FluentMessageBarProvider Section="@App.MESSAGES_DIALOG" MaxMessageCount="1" />
+
 <FluentDialogBody>
     <h3>Hello @Content.Firstname </h3>
     <p>Your lastname is @Content.Lastname and you are @Content.Age years young </p>
@@ -12,4 +14,4 @@
 @code {
     [Parameter]
     public SimplePerson Content { get; set; } = default!;
-}
+}

examples/Demo/Shared/Pages/Panel/PanelPage.razor

@@ -52,6 +52,14 @@
     </Description>
 </DemoSection>
 
+<DemoSection Title="Panels with validation" Component="@typeof(DialogPanelWithValidation)" CollocatedFiles="@(new[] { "cs" })" AdditionalFiles="@(new[] {"SimplePanel.razor"})">
+    <Description>
+        The panel that is anchored to the right side of the screen can be dismissed by clicking the dismiss button (at the top),
+        'No' button (at the bottom) or 'Yes' button (at the bottom). <br />
+        Before the panel is closed, it will validate the data and, if not ok, will prevent the dialog from closing using the 'Yes' button.
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(DialogParameters<>)" InstanceTypes="@(new[] {typeof(string)})" GenericLabel="TData" />

src/Core/Components/Dialog/FluentDialog.razor.cs

@@ -241,6 +241,16 @@ public async Task CloseAsync(DialogResult dialogResult)
             {
                 await Instance.Parameters.OnDialogClosing.InvokeAsync(Instance);
             }
+
+            if (Instance.Parameters.OnDialogValidation != null && !dialogResult.Cancelled)
+            {
+                var isValid = Instance.Parameters.OnDialogValidation();
+
+                if (!isValid)
+                {
+                    return;
+                }
+            }
         }
         DialogContext?.DialogContainer.DismissInstance(Id!, dialogResult);
         if (Instance is not null)

src/Core/Components/Dialog/Parameters/DialogParameters.cs

@@ -167,6 +167,14 @@ public virtual HorizontalAlignment Alignment
     /// This method is only called when using the <see cref="IDialogService"/>.
     /// </remarks>
     public EventCallback<DialogInstance> OnDialogOpened { get; set; } = default!;
+
+    /// <summary>
+    /// Function that is called and awaited before the dialog is closed.
+    /// </summary>
+    /// <remarks>
+    /// This is a suitable callback to use when you need to validate the data in the dialog <em>before</em> it closes.
+    /// </remarks>
+    public Func<bool> OnDialogValidation { get; set; } = default!;
 }
 
 /// <summary>