Blazor 二级弹窗实现

最新推荐文章于 2024-09-06 17:17:06 发布

Teln_小凯

最新推荐文章于 2024-09-06 17:17:06 发布

阅读量336

点赞数

分类专栏： Blazor C# 文章标签： java 服务器前端

本文链接：https://blog.csdn.net/qq873113580/article/details/134581384

版权

C# 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

Blazor

15 篇文章 1 订阅

订阅专栏

这样写二级弹窗Blazor竟然不支持，页面不弹窗也不报错

<Modal @ref="Modal" IsKeyboard="true">
    <ModalDialog Title="默认弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>

            <Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="弹窗" OnClick="() => Modal2.Toggle()" />


            <Modal @ref="Modal2" IsKeyboard="true">
                <ModalDialog Title="默认弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文2</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>

        </BodyTemplate>
    </ModalDialog>
</Modal>

最后改成这样实现了二级弹窗，这种思路如果出现三级弹窗就麻烦了，官方也没找到好的例子。

实现思路：

1、把B、C弹窗内容都放入到A页面

2、因为要实现A弹出B后，B里面再弹出C

3、所以把C的整个弹窗对象（即REF标记的对象）当做一个参数传入到B里面，如下面代码的Model2

4、这样就可以在B页面调用C页面的对象了，实现B页面打开C的弹窗

5、如果C要把返回值传给B，则可以继续在下面的A页面，通过C的操作事件去调用B页面的方法或属性，因为BC都在A页面，所以C可以直接操作B的内容

<Modal @ref="Modal" IsKeyboard="true">
    <ModalDialog Title="默认弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>

            @*            <Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="弹窗" OnClick="() => Modal2.Toggle()" />
            *@

            <UploadFile2 Modal2="Modal2" />

        </BodyTemplate>
    </ModalDialog>
</Modal>


<Modal @ref="Modal2" IsKeyboard="true">
    <ModalDialog Title="默认弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文2</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>