在ASP.NET开发中,经常需要实现弹出窗口的功能,比如弹出一个表单、显示详细信息、错误提示等。AJAXControl Toolkit提供了一个名为ModalPopUpExtender的控件,可以帮助轻松实现这一功能。本文将介绍如何使用ModalPopUpExtender,结合CSS和AJAX技术,创建一个弹出窗口。
尽管AJAXControl Toolkit中已经有了ModalPopUpExtender控件,但仍然可以探索不同的实现方式。在本文中,将分享实现方法。场景是这样的:有一个主页面,包含多个内容持有者、用户控件和Web页面。用户控件在需要时动态加载为弹出窗口。开始寻找如何将它们转换为弹出窗口的方法,并找到了两种可能有效的方案。
第一次尝试是使用ModalPopUpExtender。准备了一切:CSS背景类、PopUpPanel、OkControl、CancelControl等。它看起来很棒,但是...每当点击或使用任何会导致回发的控件时,弹出窗口就会隐藏。有一个解决方法是使用JavaScript防止控件本身导致回发,或者可以尝试在回发后重置弹出窗口的“状态”(隐藏或显示)。对来说工作量太大了。如果还记得,正在动态加载用户控件到PopUpPanel中...所以决定使用第二种方案。
第二次尝试是使用简单的HTML和CSS。找到了一个示例,通过两个Div和CSS可以实现。这对来说很熟悉,因为有时就是这样显示UpdateProgress作为一个模态弹出窗口覆盖页面的...怎么没想到呢?在这种情况下,它需要的不仅仅是这些,还需要一个JavaScript函数,在需要时显示和隐藏Div。所以开始尝试以不同的方式从代码中调用JavaScript函数,但由于场景(用户控件在Panel中,在UpdatePanel中,在ContentHolder中,在Web页面中,在主页面中),遇到了服务器尝试解析请求的错误。所以,由于无法改变这个结构以避免错误,认为使用AJAX可能会有所改变,就是这么做的。
让在HTML的末尾添加一个UpdatePanel(当然,在content标签内)。现在,在UpdatePanel的ContentTemplate中,只需要添加两个面板,一个用于覆盖层,一个用于弹出窗口。
第二个面板(下面示例中的panelPopUpPanel)有一个嵌套面板,用来创建“标题”栏。在下面的示例中,它只包含一个“关闭”按钮。在这个嵌套面板之后(仍然在PopUpPanel内),添加想要显示的内容(在下面的示例中,它包含一个名为ucPopUpUsersQuickSearch的用户控件)。
<asp:UpdatePanel id="upPopUps" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Panel id="panelOverlay" runat="server" class="Overlay" Visible="false">
<asp:Panel id="panelPopUpPanel" runat="server" class="PopUpPanel" Visible="false">
<asp:Panel id="panelPopUpTitle" runat="server" style="width: 100%; height: 20px; text-align: right; ">
<asp:ImageButton id="cmdClosePopUp" runat="server" ImageUrl="~/Images/Close.png">
</asp:ImageButton>
</asp:Panel>
<uc:UsersQuickSearch id="ucPopUpUsersQuickSearch" runat="server" Visible="false">
</uc:UsersQuickSearch>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
注意两个面板(覆盖层和弹出窗口)都设置了Class属性。这里是CSS,用于给OverlayPanel一个覆盖效果,并给PopUpPanel指定位置、大小、边框等。可以随意调整它,以改变喜欢的外观。
注意到面板的Visible属性设置为false了吗?只需更改该属性即可显示或隐藏它们,如下所示:
Private Sub showPopUp(b As Boolean)
panelOverlay.Visible = b
panelPopUpPanel.Visible = b
End Sub
这只是一个接收布尔参数(true或false)的函数,并设置面板的Visible属性为接收到的参数值。