fix modal close problem for MudBlazor

framework/src/Volo.Abp.MudBlazorUI/AbpMudCrudPageBase.cs

@@ -187,8 +187,6 @@ public abstract class AbpMudCrudPageBase<
     protected TCreateViewModel NewEntity;
     protected TKey EditingEntityId = default!;
     protected TUpdateViewModel EditingEntity;
-    protected bool CreateDialogVisible;
-    protected bool EditDialogVisible;
     protected MudForm? CreateFormRef;
     protected MudForm? EditFormRef;
     protected List<BreadcrumbItem> BreadcrumbItems = new List<BreadcrumbItem>(2);
@@ -204,6 +202,9 @@ public abstract class AbpMudCrudPageBase<
     public bool HasUpdatePermission { get; set; }
     public bool HasDeletePermission { get; set; }
 
+    protected MudDialog? _createDialog;
+    protected MudDialog? _editDialog;
+
     protected AbpMudCrudPageBase()
     {
         NewEntity = new TCreateViewModel();
@@ -339,11 +340,10 @@ public abstract class AbpMudCrudPageBase<
 
             NewEntity = new TCreateViewModel();
 
-            await InvokeAsync(() =>
+            if (_createDialog != null)
             {
-                CreateDialogVisible = true;
+                await _createDialog.ShowAsync();
-                StateHasChanged();
+            }
-            });
         }
         catch (Exception ex)
         {
@@ -351,11 +351,13 @@ public abstract class AbpMudCrudPageBase<
         }
     }
 
-    protected virtual Task CloseCreateDialogAsync()
+    protected virtual async Task CloseCreateDialogAsync()
     {
-        CreateDialogVisible = false;
         NewEntity = new TCreateViewModel();
-        return InvokeAsync(StateHasChanged);
+        if (_createDialog != null)
+        {
+            await _createDialog.CloseAsync();
+        }
     }
 
     protected virtual async Task OpenEditDialogAsync(TListViewModel entity)
@@ -369,11 +371,10 @@ public abstract class AbpMudCrudPageBase<
             EditingEntityId = entity.Id;
             EditingEntity = MapToEditingEntity(entityDto);
 
-            await InvokeAsync(() =>
+            if (_editDialog != null)
             {
-                EditDialogVisible = true;
+                await _editDialog.ShowAsync();
-                StateHasChanged();
+            }
-            });
         }
         catch (Exception ex)
         {
@@ -406,10 +407,12 @@ public abstract class AbpMudCrudPageBase<
         return ObjectMapper.Map<TUpdateViewModel, TUpdateInput>(updateViewModel);
     }
 
-    protected virtual Task CloseEditDialogAsync()
+    protected virtual async Task CloseEditDialogAsync()
     {
-        EditDialogVisible = false;
+        if (_editDialog != null)
-        return InvokeAsync(StateHasChanged);
+        {
+            await _editDialog.CloseAsync();
+        }
     }
 
     protected virtual async Task CreateEntityAsync()

modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/RoleManagement.razor

@@ -31,9 +31,9 @@
 </MudCard>
 
 @* ************************* CREATE DIALOG ************************* *@
-@if (HasCreatePermission && CreateDialogVisible)
+@if (HasCreatePermission)
 {
-    <MudDialog @bind-Visible="@CreateDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
+    <MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["NewRole"]</MudText>
         </TitleContent>
@@ -57,9 +57,9 @@
 }
 
 @* ************************* EDIT DIALOG ************************* *@
-@if (HasUpdatePermission && EditDialogVisible)
+@if (HasUpdatePermission)
 {
-    <MudDialog @bind-Visible="@EditDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
+    <MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["Edit"]</MudText>
         </TitleContent>

modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/UserManagement.razor

@@ -43,9 +43,9 @@
 </MudCard>
 
 @* ************************* CREATE DIALOG ************************* *@
-@if (HasCreatePermission && CreateDialogVisible)
+@if (HasCreatePermission)
 {
-    <MudDialog @bind-Visible="@CreateDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
+    <MudDialog @ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["NewUser"]</MudText>
         </TitleContent>
@@ -113,9 +113,9 @@
 
 
 @* ************************* EDIT DIALOG ************************* *@
-@if (HasUpdatePermission && EditDialogVisible)
+@if (HasUpdatePermission)
 {
-    <MudDialog @bind-Visible="@EditDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
+    <MudDialog @ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["Edit"]</MudText>
         </TitleContent>

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor

@@ -27,7 +27,7 @@
 @* ************************* CREATE MODAL ************************* *@
 @if (HasCreatePermission)
 {
-    <MudDialog @bind-IsVisible="@CreateDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
+    <MudDialog ref="_createDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["NewTenant"]</MudText>
         </TitleContent>
@@ -67,7 +67,8 @@
 @* ************************* EDIT MODAL ************************* *@
 @if (HasUpdatePermission)
 {
-    <MudDialog @bind-IsVisible="@EditDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })" CloseOnEscapeKey="true">
+    <MudDialog ref="_editDialog" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true })"
+        CloseOnEscapeKey="true">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["Edit"]</MudText>
         </TitleContent>