如何关闭 mud Blazor 对话框？

Question

我只是想关闭此对话框，特别是当我单击取消按钮时。我已阅读文档，但我认为我不明白它是如何工作的，非常感谢任何帮助。我尝试查看 Mud 文档、堆栈帖子 youtube 视频，但我似乎无法弄清楚问题是什么。关闭功能应用于关闭取消按钮，但没有任何反应。

对话框组件

@using MudBlazor

<MudDialog>
    <TitleContent>
        Dialog Title
    </TitleContent>
    <DialogContent>
        Dialog Content
    </DialogContent>
    <DialogActions>
        <MudButton style="background-color: red" OnClick="Cancel">Cancel</MudButton>
        <MudButton style="background-color: green;" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>
@code {
    [CascadingParameter]
    private MudDialogInstance? MudDialog { get; set; }

    private void Submit() => MudDialog?.Close(DialogResult.Ok(true));

    private void Cancel() => MudDialog?.Cancel();
} 

父组件

@using BlazorContactsApp.Services
@using BlazorContactsApp.Components
@using MudBlazor
@inject ContactService ContactService
@inject IDialogService DialogService

@page "/"
<div style="margin: 20px">
    <MudButton OnClick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
    Open Simple Dialog
</MudButton>
    <h1>Hello, world!</h1>
    <p>Welcome to your new app.</p>
</div>

 @if (contacts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    
        @foreach (var contact in contacts)
        {
            <MudCard Color="grey" style="border: 1px solid grey; margin: 2rem; width: 20vw; border-radius: 5px">
                <MudCardContent>
                    <MudText Typo="Typo.body2">Name : @contact.Name</MudText>
                </MudCardContent>
                <MudDivider />
                <MudCardContent>
                    <MudText Typo="Typo.body2">Number : @contact.Number</MudText>
                </MudCardContent>
            </MudCard>
        }

} 

@code {
    private List<ContactsApi.Models.Contact> contacts = new List<ContactsApi.Models.Contact>();

         protected override async Task OnInitializedAsync()
    {
        contacts = await ContactService.GetContactsAsync();
    }

   private async Task OpenDialogAsync()
    {
        var options = new DialogOptions { CloseOnEscapeKey = true, CloseButton = true  };
        var parameters = new DialogParameters();

        var dialog = DialogService.Show<AddContactDialog>("Dialog Title", parameters, options);
        var result = await dialog.Result;

     
    } 

   
} 

Answer 1

部署了 Mud Blazor 8 解决方案服务器和全局交互。

我根据您的问题代码构建了以下 MRE。

AddContactDialog.razor

<MudDialog>
    <TitleContent>
        Dialog Title
    </TitleContent>
    <DialogContent>
        Dialog Content
    </DialogContent>
    <DialogActions>
        <MudButton style="background-color: red" OnClick="Cancel">Cancel</MudButton>
        <MudButton style="background-color: green;" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>
@code {
    [CascadingParameter]
    private MudDialogInstance? MudDialog { get; set; }

    private void Submit() => MudDialog?.Close(DialogResult.Ok(true));

    private void Cancel() => MudDialog?.Cancel();
} 

首页：

@page "/"
@inject IDialogService DialogService

<div style="margin: 20px">
    <MudButton OnClick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
        Open Simple Dialog
    </MudButton>
    <h1>Hello, world!</h1>
    <p>Welcome to your new app.</p>
</div>

@code {
    private async Task OpenDialogAsync()
    {
        var options = new DialogOptions { CloseOnEscapeKey = true, CloseButton = true };
        var parameters = new DialogParameters();

        var dialog = DialogService.Show<AddContactDialog>("Dialog Title", parameters, options);
        var result = await dialog.Result;
    }
}

按预期打开和关闭。 尝试一下。

我能得出的唯一结论是：

• 缺少关键信息或
• 您显示的代码不是您运行的代码。