BlazoredModal 未关闭 WebApp Net 8

Question

我一直在使用 https://blazored.github.io/Modal/usage/passing-data 尝试弹出一个像对话框一样的模式，供用户确认或取消按钮按下。

我正在使用 Blazor Web App net 8 和 Blazored.Modal 7.3.1

如果按下“确认”按钮，我会收到 modalReference.Result.Confirmed 为 true，如我所料，否则为 false。

问题在于模式不会消失，最初出现时会遮蔽网页的其余部分（这很好），并且需要单击四次（任一按钮）才能使模式消失并显示页面买回来了。每次点击，背景都会变得不那么黑。

知道为什么会发生这种情况吗？

App.razor

<CascadingAuthenticationState>
    <CascadingBlazoredModal>
        <Router AppAssembly="@typeof(App).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
                <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
            </Found>
            <NotFound>
                <PageTitle>Not found</PageTitle>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p role="alert">Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingBlazoredModal>
</CascadingAuthenticationState>

对话框模态代码：

<div class="row">
    <p>@Message</p>
</div>
<div class="row">
    <div class="col-md-6">
        <button type="button" class="btn btn-secondary" @onclick="Confirm">Confirm</button>
    </div>
    <div class="col-md-6">
        <button type="button" class="btn btn-secondary" @onclick="Cancel">Close</button>
    </div>
</div>

@code {
    [CascadingParameter] BlazoredModalInstance DialogModal { get; set; } = default!;

    [Parameter] public string? Title { get; set; }
    [Parameter] public string? Message { get; set; }
    // close - closes with a positive outcome
    private async Task Confirm() => await DialogModal.CloseAsync(ModalResult.Ok(true));
    // cancel - closes with no actions
    private async Task Cancel() => await DialogModal.CancelAsync();
}

调用组件：

    <div>
        <Button class="btn btn-primary mt-2" @onclick="ShowDialog">Show</Button>
    </div>
</form>

@code {
    [SupplyParameterFromForm] public Request? Model { get; set; }
    [CascadingParameter] private IModalService ModalService { get; set; } = default!;
    private string? Message { get; set; }
    
    protected override void OnInitialized()
    {
        Model ??= new Request();
        Message = "Are you sure you wish to proceed ?";
    }

    private async void ShowDialog()
    {
        var parameters = new ModalParameters()
            .Add(nameof(Dialog.Message), Message);
        
        var dialogModalReference = ModalService.Show<Dialog>(parameters);
        var result = await dialogModalReference.Result;

        if (!result.Confirmed) return;
        if (Model != null)
           // do stuff
    }
}

Answer 1

在调用组件中，按钮默认被假定为提交，当将类型更改为按钮时，问题就消失了。

执行两次：

<Button class="btn btn-primary mt-2" @onclick="ShowDialog">Show</Button>

执行一个：

<Button type="button" class="btn btn-primary mt-2" @onclick="ShowDialog">Show</Button>