[Dialog] Add type safe way of working with IDialogContentComponent

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

@@ -3841,6 +3841,46 @@
             Action with StateHasChanged assigned in FluentSplashScreen.razor.cs
             </summary>
         </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.DialogHelper">
+            <summary>
+            Helper class for showing dialogs with typesafe parameters
+            </summary>
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogHelper.From``1">
+            <summary>
+            Create a dialog helper for the specified dialog type
+            </summary>
+            <typeparam name="TDialog">Type of component to display.</typeparam>
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogHelper.ShowDialogAsync``2(Microsoft.FluentUI.AspNetCore.Components.IDialogService,Microsoft.FluentUI.AspNetCore.Components.DialogHelper{``0},``1,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
+            <summary>
+            Shows a dialog with the component type as the body,
+            passing the specified <paramref name="data"/>
+            </summary>
+            <typeparam name="TDialog">Type of component to display.</typeparam>
+            <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
+            <param name="svc">The Dialog service.</param>
+            <param name="dialogHelper">The dialog helper from which we can infer the TData.</param>
+            <param name="data">Content to pass to component being displayed.</param>
+            <param name="parameters">Parameters to configure the dialog component.</param>
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogHelper.ShowDialogAsync``2(Microsoft.FluentUI.AspNetCore.Components.DialogHelper{``0},``1,Microsoft.FluentUI.AspNetCore.Components.IDialogService,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
+            <summary>
+            Shows a dialog with the component type as the body,
+            passing the specified <paramref name="data"/>
+            </summary>
+            <typeparam name="TDialog">Type of component to display.</typeparam>
+            <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
+            <param name="dialogHelper">The dialog helper from which we can infer the TData.</param>
+            <param name="svc">The Dialog service.</param>
+            <param name="data">Content to pass to component being displayed.</param>
+            <param name="parameters">Parameters to configure the dialog component.</param>
+        </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.DialogHelper`1">
+            <summary>
+            Helper struct that lets us infer the type of the dialog content
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.DialogResult">
             <summary />
         </member>
@@ -3868,6 +3908,9 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync``1(Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
             <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync``1(Microsoft.FluentUI.AspNetCore.Components.DialogParameters)"/>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync``2(``1,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
+            <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.DialogHelper.ShowDialogAsync``2(Microsoft.FluentUI.AspNetCore.Components.IDialogService,Microsoft.FluentUI.AspNetCore.Components.DialogHelper{``0},``1,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)"/>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.UpdateDialogAsync``1(System.String,Microsoft.FluentUI.AspNetCore.Components.DialogParameters{``0})">
             <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.UpdateDialogAsync``1(System.String,Microsoft.FluentUI.AspNetCore.Components.DialogParameters{``0})"/>/>
         </member>
@@ -4108,7 +4151,7 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync``1(System.Type,``0,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
             <summary>
             Shows a dialog with the component type as the body,
-            passing the specified <paramref name="data"/> 
+            passing the specified <paramref name="data"/>
             </summary>
             <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
             <param name="dialogComponent">Type of component to display.</param>
@@ -4118,7 +4161,7 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync``1(System.Object,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
             <summary>
             Shows a dialog with the component type as the body,
-            passing the specified <paramref name="data"/> 
+            passing the specified <paramref name="data"/>
             </summary>
             <typeparam name="TDialog">Type of component to display.</typeparam>
             <param name="data">Content to pass to component being displayed.</param>
@@ -4131,6 +4174,16 @@
             <typeparam name="TDialog">Type of component to display.</typeparam>
             <param name="parameters">Parameters to configure the dialog component.</param>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync``2(``1,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
+            <summary>
+            Shows a dialog with the component type as the body,
+            passing the specified <paramref name="data"/>
+            </summary>
+            <typeparam name="TDialog">Type of component to display.</typeparam>
+            <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
+            <param name="data">Content to pass to component being displayed.</param>
+            <param name="parameters">Parameters to configure the dialog component.</param>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.UpdateDialogAsync``1(System.String,Microsoft.FluentUI.AspNetCore.Components.DialogParameters{``0})">
             <summary>
             Updates a dialog.

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoItemsPerPage.razor

@@ -4,7 +4,7 @@
 @inject IJSRuntime JSRuntime
 
 <div id="datagrid-container">
-    <FluentDataGrid Items="items.AsQueryable()"
+    <FluentDataGrid Items="items!.AsQueryable()"
     Pagination="@pagination"
     RowSize="@rowSize"
     AutoItemsPerPage="true"

examples/Demo/Shared/Pages/Dialog/DialogPage.razor

@@ -117,7 +117,9 @@
 <DemoSection Title="Editable Dialog" Component="@typeof(DialogEditableExample)" AdditionalFiles="@(new[] { "SimpleEditDialog.razor" })">
     <Description>
         <p>
-            This example shows how to open a Dialog containing editable fields.
+            This example shows how to open a Dialog containing editable fields. The first button uses the till now standard way of
+            doing that. The second button uses alternative code which offers a type safe way of using <code>IDialogContentComponent&lt;TContent&gt;</code><br />
+            This has been added in 4.11.4 and uses the new <code>DialogHelper</code> class. See the Razor tab and the <FluentAnchor Appearance="Appearance.Hypertext" Href="#dialoghelper-class">documentation</FluentAnchor> below on how this new method can be used.
         </p>
     </Description>
 </DemoSection>
@@ -208,3 +210,5 @@
 <ApiDocumentation Component="typeof(FluentDialogFooter)" />
 
 <ApiDocumentation Component="typeof(FluentDialogBody)" />
+
+<ApiDocumentation Component="typeof(DialogHelper)" />

examples/Demo/Shared/Pages/Dialog/Examples/DialogEditableExample.razor

@@ -2,10 +2,16 @@
 
 <FluentButton Appearance="Appearance.Accent" OnClick="@EditAsync">Edit</FluentButton>
 
+
+
+<FluentButton Appearance="Appearance.Accent" OnClick="@EditSafeAsync">Edit (type safe)</FluentButton>
+
+
 <p>Name: @DialogData.Name - Age: @DialogData.Age</p>
 
 @code
 {
+    string TestData = "Test Data";
     SimpleEditDialog.RegisterContent DialogData { get; set; } = new() { Id = 1, Name = "Denis", Age = 24 };
 
     private async Task EditAsync()
@@ -15,12 +21,12 @@
         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,
-            });
+        {
+            Height = "400px",
+            Title = $"Updating the {DialogData.Name} sheet",
+            PreventDismissOnOverlayClick = true,
+            PreventScroll = true,
+        });
 
         var result = await dialog.Result;
         if (!result.Cancelled && result.Data != null)
@@ -29,4 +35,23 @@
         }
 
     }
+
+    private async Task EditSafeAsync()
+    {
+        // When replacing the line below with the commented one, the code will not compile
+        //var dialog = await DialogService.ShowAsync(DialogHelper.From<SimpleEditDialog>() ,TestData, new DialogParameters()
+        var dialog = await DialogService.ShowDialogAsync(DialogHelper.From<SimpleEditDialog>(), DialogData, 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;
+        }
+    }
 }

src/Core/Components/Dialog/Services/DialogHelper.cs

@@ -0,0 +1,49 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// Helper class for showing dialogs with typesafe parameters
+/// </summary>
+public static class DialogHelper
+{
+    /// <summary>
+    /// Create a dialog helper for the specified dialog type
+    /// </summary>
+    /// <typeparam name="TDialog">Type of component to display.</typeparam>
+    public static DialogHelper<TDialog> From<TDialog>() where TDialog : IDialogContentComponent => default;
+
+    /// <summary>
+    /// Shows a dialog with the component type as the body,
+    /// passing the specified <paramref name="data"/>
+    /// </summary>
+    /// <typeparam name="TDialog">Type of component to display.</typeparam>
+    /// <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
+    /// <param name="svc">The Dialog service.</param>
+    /// <param name="dialogHelper">The dialog helper from which we can infer the TData.</param>
+    /// <param name="data">Content to pass to component being displayed.</param>
+    /// <param name="parameters">Parameters to configure the dialog component.</param>
+    public static Task<IDialogReference> ShowDialogAsync<TDialog, TData>(this IDialogService svc, DialogHelper<TDialog> dialogHelper, TData data, DialogParameters parameters)
+       where TDialog : IDialogContentComponent<TData> => svc.ShowDialogAsync<TDialog, TData>(data, parameters);
+
+    /// <summary>
+    /// Shows a dialog with the component type as the body,
+    /// passing the specified <paramref name="data"/>
+    /// </summary>
+    /// <typeparam name="TDialog">Type of component to display.</typeparam>
+    /// <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
+    /// <param name="dialogHelper">The dialog helper from which we can infer the TData.</param>
+    /// <param name="svc">The Dialog service.</param>
+    /// <param name="data">Content to pass to component being displayed.</param>
+    /// <param name="parameters">Parameters to configure the dialog component.</param>
+    public static Task<IDialogReference> ShowDialogAsync<TDialog, TData>(this DialogHelper<TDialog> dialogHelper, TData data, IDialogService svc, DialogParameters parameters)
+       where TDialog : IDialogContentComponent<TData> => svc.ShowDialogAsync<TDialog, TData>(data, parameters);
+}
+
+/// <summary>
+/// Helper struct that lets us infer the type of the dialog content
+/// </summary>
+public readonly struct DialogHelper<TDialog>
+   where TDialog : IDialogContentComponent;

src/Core/Components/Dialog/Services/DialogService-Dialog.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Microsoft.AspNetCore.Components;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -37,6 +41,13 @@ public async Task<IDialogReference> ShowDialogAsync<TDialog>(DialogParameters pa
         return await ShowDialogAsync<object>(typeof(TDialog), default!, parameters);
     }
 
+    /// <inheritdoc cref="DialogHelper.ShowDialogAsync{TDialog, TData}(IDialogService, DialogHelper{TDialog}, TData, DialogParameters)"/>
+    public async Task<IDialogReference> ShowDialogAsync<TDialog, TData>(TData data, DialogParameters parameters)
+       where TDialog : IDialogContentComponent<TData>
+    {
+        return await ShowDialogAsync<TDialog>(data!, parameters);
+    }
+
     /// <inheritdoc cref="IDialogService.UpdateDialogAsync{TData}(string, DialogParameters{TData})"/>/>
     public async Task<IDialogReference?> UpdateDialogAsync<TData>(string id, DialogParameters<TData> parameters)
         where TData : class

src/Core/Components/Dialog/Services/IDialogService-Dialog.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Microsoft.AspNetCore.Components;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -6,7 +10,7 @@ public partial interface IDialogService
 {
     /// <summary>
     /// Shows a dialog with the component type as the body,
-    /// passing the specified <paramref name="data"/> 
+    /// passing the specified <paramref name="data"/>
     /// </summary>
     /// <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
     /// <param name="dialogComponent">Type of component to display.</param>
@@ -17,7 +21,7 @@ Task<IDialogReference> ShowDialogAsync<TData>(Type dialogComponent, TData data,
 
     /// <summary>
     /// Shows a dialog with the component type as the body,
-    /// passing the specified <paramref name="data"/> 
+    /// passing the specified <paramref name="data"/>
     /// </summary>
     /// <typeparam name="TDialog">Type of component to display.</typeparam>
     /// <param name="data">Content to pass to component being displayed.</param>
@@ -33,6 +37,17 @@ Task<IDialogReference> ShowDialogAsync<TDialog>(object data, DialogParameters pa
     Task<IDialogReference> ShowDialogAsync<TDialog>(DialogParameters parameters)
          where TDialog : IDialogContentComponent;
 
+    /// <summary>
+    /// Shows a dialog with the component type as the body,
+    /// passing the specified <paramref name="data"/>
+    /// </summary>
+    /// <typeparam name="TDialog">Type of component to display.</typeparam>
+    /// <typeparam name="TData">Type of content to pass to component being displayed.</typeparam>
+    /// <param name="data">Content to pass to component being displayed.</param>
+    /// <param name="parameters">Parameters to configure the dialog component.</param>
+    Task<IDialogReference> ShowDialogAsync<TDialog, TData>(TData data, DialogParameters parameters)
+       where TDialog : IDialogContentComponent<TData> => ShowDialogAsync<TDialog>(data!, parameters);
+
     /// <summary>
     /// Updates a dialog.
     /// </summary>