Blazor使用级联值实现Dialog关闭功能

思路

1.在模板页面增加CascadingValue传入Dialog的实例
2.在BaseComponent中加入[CascadingParameter]特性声明级联Dialog实例参数
3.在模块页面按钮方法中调用Dialog实例参数的Close方法

模板页面

<div class="app">
<CascadingValue Value="dialog">
<DynamicComponent Type="componentType" />
</CascadingValue>
</div>
<Dialog @ref="dialog" />
@code {
private Dialog dialog;
private Type componentType;
}

BaseComponent

public class BaseComponent : ComponentBase, IDisposable {
[CascadingParameter]
protected Dialog Dialog { get; set; }
}

模块页面

@inherits BaseComponent
<div>
<button @onclick="OnOpen">打开</button>
</div>
@code {
private void OnOpen() {
UI.Show(new DialogOption{
Title = "测试",
Content = builder => {
builder.Element("button", b => {
b.Text("关闭").OnClick(EventCallback.Factory.Create(this, e => Dialog.Close()));
})
}
});
}
}
posted @   known  阅读(137)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示