1

我尝试使用处理 Blazor 中的onclose事件dialog。我尝试使用该@onclose属性，但它不起作用。

<dialog @onclose="MyEventHandler">
</dialog>

@code {    
    async Task MyEventHandler()
    {
    }
}

这会产生以下错误：

Unhandled exception rendering component: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '@onclose' is not a valid attribute name.
System.InvalidOperationException: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '@onclose' is not a valid attribute name.
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)

是否可以在 Blazor 中处理此事件？

环境：

  • Blazor - 服务器端渲染
  • .NET 核心 3.1
4

3 回答 3

1

你正试图将一个方形块穿过一个圆形孔。使用 Blazor 组件打开和关闭非常容易。没有必要尝试使用不受欢迎的 html 标记并捕获 JavaScript 事件。

于 2021-06-23T06:19:34.813 回答
1

您可以定义 close 方法并在 click 命令中调用它：

public void Close()
    {
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }

点击命令如下：

<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="() => Close()" style="float:left;">
                        <span aria-hidden="true" class="left;">&times;</span>
                    </button>
于 2021-06-23T05:01:46.493 回答
1

<dialog>由于标签未得到广泛支持（Edge、IE、Safari 不支持它），因此有更好的方法来实现对话框。以 https://github.com/Blazored/Modal为例。

但这是可以完成的。您可以将 thenopen属性设置为 Blazor 值，并在要隐藏对话框时设置为 null（这删除了该属性）。我创建了一个简单的演示（下面的链接）。

https://blazorfiddle.com/s/qq3osesu

请注意，这仅适用于 FireFox/Chrome。

于 2020-01-16T09:29:03.013 回答