From 737dba1af22ee1cd0cc6748231f16e4ce9f53b20 Mon Sep 17 00:00:00 2001
From: maliming <malimings@gmail.com>
Date: Thu, 7 May 2026 15:32:57 +0800
Subject: [PATCH] Refactor MudBlazor dialog forms to use MudStack for improved
 layout and spacing

---
 .../framework/ui/blazor/forms-validation.md   |  34 ++--
 docs/en/tutorials/book-store/part-03.md       | 154 ++++++++++--------
 docs/en/tutorials/book-store/part-09.md       |  44 ++---
 3 files changed, 124 insertions(+), 108 deletions(-)

diff --git a/docs/en/framework/ui/blazor/forms-validation.md b/docs/en/framework/ui/blazor/forms-validation.md
index d8acb51776..c7f799c484 100644
--- a/docs/en/framework/ui/blazor/forms-validation.md
+++ b/docs/en/framework/ui/blazor/forms-validation.md
@@ -71,22 +71,24 @@ The most common pattern is wrapping inputs in a `<MudForm>` and binding the form
 @using System.ComponentModel.DataAnnotations
 
 <MudForm @ref="_form" @bind-IsValid="@_isValid" Model="@_model">
-    <MudTextField @bind-Value="_model.Name"
-                  Label="Name"
-                  Required="true"
-                  RequiredError="Please enter the name." />
-
-    <MudTextField @bind-Value="_model.Email"
-                  Label="Email"
-                  Required="true"
-                  Validation="@(new EmailAddressAttribute() { ErrorMessage = "Enter a valid email." })" />
-
-    <MudButton OnClick="@SubmitAsync"
-               Disabled="@(!_isValid)"
-               Variant="Variant.Filled"
-               Color="Color.Primary">
-        Submit
-    </MudButton>
+    <MudStack Spacing="3">
+        <MudTextField @bind-Value="_model.Name"
+                      Label="Name"
+                      Required="true"
+                      RequiredError="Please enter the name." />
+
+        <MudTextField @bind-Value="_model.Email"
+                      Label="Email"
+                      Required="true"
+                      Validation="@(new EmailAddressAttribute() { ErrorMessage = "Enter a valid email." })" />
+
+        <MudButton OnClick="@SubmitAsync"
+                   Disabled="@(!_isValid)"
+                   Variant="Variant.Filled"
+                   Color="Color.Primary">
+            Submit
+        </MudButton>
+    </MudStack>
 </MudForm>
 
 @code {
diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md
index 942fd5cb0e..259475b27d 100644
--- a/docs/en/tutorials/book-store/part-03.md
+++ b/docs/en/tutorials/book-store/part-03.md
@@ -1217,29 +1217,31 @@ This code requires a service; Inject the `AbpBlazorMessageLocalizerHelper<T>` at
 Open the `Books.razor` and add the following code to the end of the page:
 
 ````razor
-<MudDialog @ref="_createDialog">
+<MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@L["NewBook"]</MudText>
     </TitleContent>
     <DialogContent>
         <MudForm @ref="@CreateFormRef" Model="@NewEntity">
-            <MudTextField @bind-Value="@NewEntity.Name"
-                          Label="@L["Name"]"
-                          For="@(() => NewEntity.Name)"
-                          Required="true" />
-            <MudSelect T="BookType"
-                       @bind-Value="@NewEntity.Type"
-                       Label="@L["Type"]">
-                @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
-                {
-                    <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
-                }
-            </MudSelect>
-            <MudDatePicker @bind-Date="@NewEntity.PublishDate"
-                           Label="@L["PublishDate"]" />
-            <MudNumericField T="float"
-                             @bind-Value="@NewEntity.Price"
-                             Label="@L["Price"]" />
+            <MudStack Spacing="3">
+                <MudTextField @bind-Value="@NewEntity.Name"
+                              Label="@L["Name"]"
+                              For="@(() => NewEntity.Name)"
+                              Required="true" />
+                <MudSelect T="BookType"
+                           @bind-Value="@NewEntity.Type"
+                           Label="@L["Type"]">
+                    @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
+                    }
+                </MudSelect>
+                <MudDatePicker @bind-Date="@NewEntity.PublishDate"
+                               Label="@L["PublishDate"]" />
+                <MudNumericField T="float"
+                                 @bind-Value="@NewEntity.Price"
+                                 Label="@L["Price"]" />
+            </MudStack>
         </MudForm>
     </DialogContent>
     <DialogActions>
@@ -1253,6 +1255,8 @@ Open the `Books.razor` and add the following code to the end of the page:
 
 * The form uses `[Required]`/DataAnnotations for validation; messages are localized via the same `AbpResource` localization system.
 * The `_createDialog` field, `CloseCreateDialogAsync`, `CreateFormRef` and `CreateEntityAsync` are all defined in `AbpMudCrudPageBase`. Check the [MudBlazor documentation](https://mudblazor.com/components/dialog) if you want to understand the `MudDialog` and other components.
+* `MudDialog.Options` widens the dialog (`MaxWidth.Medium` + `FullWidth`) so the form fields are not cramped.
+* `MudStack` with `Spacing="3"` keeps the inputs visually separated; without it MudBlazor inputs render flush against each other.
 * `MudDatePicker.@bind-Date` requires a nullable `DateTime?`. If your DTO uses non-nullable `DateTime`, change it to `DateTime?` (`public DateTime? PublishDate { get; set; }`) when using the MudBlazor variant.
 
 {{end}}
@@ -1379,29 +1383,31 @@ We can now define a modal to edit the book. Add the following code to the end of
 {{if BlazorUI == "MudBlazor"}}
 
 ````razor
-<MudDialog @ref="_editDialog">
+<MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@EditingEntity.Name</MudText>
     </TitleContent>
     <DialogContent>
         <MudForm @ref="@EditFormRef" Model="@EditingEntity">
-            <MudTextField @bind-Value="@EditingEntity.Name"
-                          Label="@L["Name"]"
-                          For="@(() => EditingEntity.Name)"
-                          Required="true" />
-            <MudSelect T="BookType"
-                       @bind-Value="@EditingEntity.Type"
-                       Label="@L["Type"]">
-                @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
-                {
-                    <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
-                }
-            </MudSelect>
-            <MudDatePicker @bind-Date="@EditingEntity.PublishDate"
-                           Label="@L["PublishDate"]" />
-            <MudNumericField T="float"
-                             @bind-Value="@EditingEntity.Price"
-                             Label="@L["Price"]" />
+            <MudStack Spacing="3">
+                <MudTextField @bind-Value="@EditingEntity.Name"
+                              Label="@L["Name"]"
+                              For="@(() => EditingEntity.Name)"
+                              Required="true" />
+                <MudSelect T="BookType"
+                           @bind-Value="@EditingEntity.Type"
+                           Label="@L["Type"]">
+                    @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
+                    }
+                </MudSelect>
+                <MudDatePicker @bind-Date="@EditingEntity.PublishDate"
+                               Label="@L["PublishDate"]" />
+                <MudNumericField T="float"
+                                 @bind-Value="@EditingEntity.Price"
+                                 Label="@L["Price"]" />
+            </MudStack>
         </MudForm>
     </DialogContent>
     <DialogActions>
@@ -1744,29 +1750,31 @@ Here's the complete code to create the book management CRUD page, that has been
     </MudCardContent>
 </MudCard>
 
-<MudDialog @ref="_createDialog">
+<MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@L["NewBook"]</MudText>
     </TitleContent>
     <DialogContent>
         <MudForm @ref="@CreateFormRef" Model="@NewEntity">
-            <MudTextField @bind-Value="@NewEntity.Name"
-                          Label="@L["Name"]"
-                          For="@(() => NewEntity.Name)"
-                          Required="true" />
-            <MudSelect T="BookType"
-                       @bind-Value="@NewEntity.Type"
-                       Label="@L["Type"]">
-                @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
-                {
-                    <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
-                }
-            </MudSelect>
-            <MudDatePicker @bind-Date="@NewEntity.PublishDate"
-                           Label="@L["PublishDate"]" />
-            <MudNumericField T="float"
-                             @bind-Value="@NewEntity.Price"
-                             Label="@L["Price"]" />
+            <MudStack Spacing="3">
+                <MudTextField @bind-Value="@NewEntity.Name"
+                              Label="@L["Name"]"
+                              For="@(() => NewEntity.Name)"
+                              Required="true" />
+                <MudSelect T="BookType"
+                           @bind-Value="@NewEntity.Type"
+                           Label="@L["Type"]">
+                    @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
+                    }
+                </MudSelect>
+                <MudDatePicker @bind-Date="@NewEntity.PublishDate"
+                               Label="@L["PublishDate"]" />
+                <MudNumericField T="float"
+                                 @bind-Value="@NewEntity.Price"
+                                 Label="@L["Price"]" />
+            </MudStack>
         </MudForm>
     </DialogContent>
     <DialogActions>
@@ -1777,29 +1785,31 @@ Here's the complete code to create the book management CRUD page, that has been
     </DialogActions>
 </MudDialog>
 
-<MudDialog @ref="_editDialog">
+<MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@EditingEntity.Name</MudText>
     </TitleContent>
     <DialogContent>
         <MudForm @ref="@EditFormRef" Model="@EditingEntity">
-            <MudTextField @bind-Value="@EditingEntity.Name"
-                          Label="@L["Name"]"
-                          For="@(() => EditingEntity.Name)"
-                          Required="true" />
-            <MudSelect T="BookType"
-                       @bind-Value="@EditingEntity.Type"
-                       Label="@L["Type"]">
-                @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
-                {
-                    <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
-                }
-            </MudSelect>
-            <MudDatePicker @bind-Date="@EditingEntity.PublishDate"
-                           Label="@L["PublishDate"]" />
-            <MudNumericField T="float"
-                             @bind-Value="@EditingEntity.Price"
-                             Label="@L["Price"]" />
+            <MudStack Spacing="3">
+                <MudTextField @bind-Value="@EditingEntity.Name"
+                              Label="@L["Name"]"
+                              For="@(() => EditingEntity.Name)"
+                              Required="true" />
+                <MudSelect T="BookType"
+                           @bind-Value="@EditingEntity.Type"
+                           Label="@L["Type"]">
+                    @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <MudSelectItem Value="@bookTypeValue">@L[$"Enum:BookType.{(int)bookTypeValue}"]</MudSelectItem>
+                    }
+                </MudSelect>
+                <MudDatePicker @bind-Date="@EditingEntity.PublishDate"
+                               Label="@L["PublishDate"]" />
+                <MudNumericField T="float"
+                                 @bind-Value="@EditingEntity.Price"
+                                 Label="@L["Price"]" />
+            </MudStack>
         </MudForm>
     </DialogContent>
     <DialogActions>
diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md
index a26ebad018..22c144dd14 100644
--- a/docs/en/tutorials/book-store/part-09.md
+++ b/docs/en/tutorials/book-store/part-09.md
@@ -1083,21 +1083,23 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the {{ if UI == "B
     </MudCardContent>
 </MudCard>
 
-<MudDialog @ref="CreateAuthorDialog">
+<MudDialog @ref="CreateAuthorDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@L["NewAuthor"]</MudText>
     </TitleContent>
     <DialogContent>
         <MudForm @ref="@CreateFormRef" Model="@NewAuthor">
-            <MudTextField @bind-Value="@NewAuthor.Name"
-                          Label="@L["Name"]"
-                          For="@(() => NewAuthor.Name)"
-                          Required="true" />
-            <MudDatePicker @bind-Date="@NewAuthorBirthDate"
-                           Label="@L["BirthDate"]" />
-            <MudTextField @bind-Value="@NewAuthor.ShortBio"
-                          Label="@L["ShortBio"]"
-                          Lines="5" />
+            <MudStack Spacing="3">
+                <MudTextField @bind-Value="@NewAuthor.Name"
+                              Label="@L["Name"]"
+                              For="@(() => NewAuthor.Name)"
+                              Required="true" />
+                <MudDatePicker @bind-Date="@NewAuthorBirthDate"
+                               Label="@L["BirthDate"]" />
+                <MudTextField @bind-Value="@NewAuthor.ShortBio"
+                              Label="@L["ShortBio"]"
+                              Lines="5" />
+            </MudStack>
         </MudForm>
     </DialogContent>
     <DialogActions>
@@ -1108,21 +1110,23 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the {{ if UI == "B
     </DialogActions>
 </MudDialog>
 
-<MudDialog @ref="EditAuthorDialog">
+<MudDialog @ref="EditAuthorDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@EditingAuthor.Name</MudText>
     </TitleContent>
     <DialogContent>
         <MudForm @ref="@EditFormRef" Model="@EditingAuthor">
-            <MudTextField @bind-Value="@EditingAuthor.Name"
-                          Label="@L["Name"]"
-                          For="@(() => EditingAuthor.Name)"
-                          Required="true" />
-            <MudDatePicker @bind-Date="@EditingAuthorBirthDate"
-                           Label="@L["BirthDate"]" />
-            <MudTextField @bind-Value="@EditingAuthor.ShortBio"
-                          Label="@L["ShortBio"]"
-                          Lines="5" />
+            <MudStack Spacing="3">
+                <MudTextField @bind-Value="@EditingAuthor.Name"
+                              Label="@L["Name"]"
+                              For="@(() => EditingAuthor.Name)"
+                              Required="true" />
+                <MudDatePicker @bind-Date="@EditingAuthorBirthDate"
+                               Label="@L["BirthDate"]" />
+                <MudTextField @bind-Value="@EditingAuthor.ShortBio"
+                              Label="@L["ShortBio"]"
+                              Lines="5" />
+            </MudStack>
         </MudForm>
     </DialogContent>
     <DialogActions>