ASP.NET AJAX 弹出窗口

• 下载演示项目 - 28.21 KB
• 下载源代码 - 303.0 KB

引言

弹出窗口是 UI 开发工具箱中有用的工具。它们允许在不改变上下文的情况下显示和输入额外信息，并且可以访问主窗口中显示的内容。这样，它们可以帮助减少用户操作和页面回发的次数。因此，服务器的负载也可以降低。换句话说，它们有潜力提高用户和服务器的性能。

在 Web 应用程序中，对弹出窗口的支持有限。可以使用 JavaScript 打开新的浏览器窗口，但很难管理该弹出窗口。例如，当页面离开时，弹出窗口应该关闭。此外，弹出窗口拦截器可能会干扰使用 window.open() 的 Web 应用程序，导致大量的帮助台电话。对于简单的错误消息，可以使用 JavaScript alert() 函数，但该函数不允许文本格式化。

ASP.NET AJAX 带来了对更好用户界面的支持。DragPanelExtender 和 ResizableControlExtender 支持创建满足 ASP.NET Web 应用程序开发人员需求的弹出窗口。PopupPanel 控件采用这种方法。

要求

PopupPanel 控件满足以下要求：

1. 它有一个可选的标题和一个可选的页脚。
2. 可以配置标题文本或弹出窗口标题。
3. 标题可用于拖动弹出窗口。如果不存在标题，整个弹出窗口将是可拖动的。
4. 标题有一个图像按钮用于关闭弹出窗口。
5. 弹出窗口可以调整大小，并具有最小和最大宽度和高度。通过拖动右下角的调整大小图像来完成调整大小。
6. 页脚可选择包含一到三个按钮。可以配置按钮文本以及这些按钮的客户端和服务器回调函数。
7. 如果页面上有多个弹出窗口，则必须能够通过客户端脚本打开和关闭每个弹出窗口，或者将任何一个弹出窗口置于最前面，最好是通过单个语句实现。
8. 其 HTML 内容必须在客户端和服务器端都可以配置。它应该没有任何限制。
9. 如果内容不适合，控件必须添加水平和/或垂直滚动条以支持显示。这些滚动条的显示还取决于调整大小时弹出窗口的大小。
10. 它是一个单一的单元：所有 JavaScript、CSS 和图像都是嵌入式资源，以简化安装。
11. 它在 IE7 和 Firefox 2.0 上均可运行。
12. 如果页面上有多个弹出窗口，可以通过单击其中一个来获得焦点。获得焦点的弹出窗口位于最上面，并具有不同的标题颜色。

实现

PopupPanel 控件是一个复合控件。每个 PopupPanel 控件都插入 JavaScript，该 JavaScript 会创建一个对象来表示弹出窗口。如果 PopupPanel 控件的 ID 是 MyPopup，那么相应的 JavaScript 对象 ID 为 MyPopupObj。该对象的原型包含 open、close、focus 和 resize 函数，以及返回弹出窗口本身 ID、其标题、其正文内容和其页脚的函数。

// Class prototype
Ktmd.Popup.prototype = 
{
    getId:          Ktmd$Popup$getId,
    getBodyId:      Ktmd$Popup$getBodyId,
    getHeaderId:    Ktmd$Popup$getHeaderId,
    getFooterId:    Ktmd$Popup$getFooterId,
    open:           Ktmd$Popup$open,
    close:          Ktmd$Popup$close,
    focus:          Ktmd$Popup$focus,
    resize:         Ktmd$Popup$resize 
}

这样，打开弹出窗口就如同调用 eval('MyPopupObj').open() 一样简单。PopupPanel 控件同时使用 DragPanelExtender 和 ResizableControlExtender。后者有一个属性可以配置用于调整大小的 JavaScript 函数。不幸的是，该属性不允许为该函数传递参数。因此，必须为每个弹出窗口定义一个不同的函数，对于 ID 为 MyPopup 的弹出窗口，该函数将被调用为 resize_MyPopup。

将弹出窗口置于最前面是通过在单击弹出窗口时设置其 z-index 来实现的。它被设置为任何弹出窗口的最大 z-index 加一。有一个全局变量维护最大值，该变量最初设置为 100。

浏览器特定

大多数浏览器特定功能隐藏在 DragPanelExtender 和 ResizableControlExtender 中。在 IE 中，右下角的 DragHandle 不会自动出现在页眉的上方。因此，页眉比其他情况下小 16 像素。IE 为边框浮雕效果提供了更好的 3D 效果。在 Firefox 中，左上角会变成白色，模糊弹出窗口的边界。这可以通过在 HTML body 开始处使用以下脚本来缓解：

<script type="text/javascript">
    if (!document.all)
    {   // Firefox needs a bit of help handling 'outset'
        document.write("<style type='text/css'>");
        document.write("    .popupContainer{");
        document.write("        border: outset #B4B0A8 2px;");
        document.write("    }");
        document.write("</style>");
    }
</script>

该控件在 IE6 中看起来不太好。调整大小函数可能需要不同。

用途

在页面上使用该控件

1. 在页面上注册该控件。

   <%@ Register Assembly="KtmdServerControls" 
       Namespace="Kronos.Tmd.ServerControls" TagPrefix="Ktmd" %>

2. 将控件添加到页面，例如：

   <Ktmd:PopupPanel ID="somePopup" 
       OffsetX="200px" OffSetY="200px" 
       ShowButtonOne="True"
       ButtonOneText="OK"
       ButtonOneOnClick="eval('somePopupObj').close(); return false;"
       Width="225"
       Height="150" 
       HeaderText="Title Text"
       MaximumWidth="300"
       MaximumHeight="300"
       runat="server">
       <ContentTemplate>
           <DM:UploadFile id="ucUploadFile" runat="server" />
       </ContentTemplate>
   </Ktmd:PopupPanel>

3. 为了使嵌入的 CSS 生效，请向页面的 head 元素添加一个 HTML 链接。

   <link rel="Stylesheet" id="htmlStyleSheetLink" runat="server" />

4. 在页面加载时设置 href 属性。以类似的方式提供对嵌入式 JavaScript 的访问。

   if (!IsPostBack)
   {
       htmlStyleSheetLink.Href = PopupPanel.GetCssWebResourceUrl(Page);
   }
   ScriptManager.GetCurrent(Page).Scripts.Add(
       PopupPanel.GetJavaScriptReference());

要从服务器访问控件的内容，请使用 Content 属性。

IUploadFile uploadFile = 
    somePopup.Content.FindControl("ucUploadFile") as IUploadFile;
string fileContent = uploadFile.GetUploadedDataUtf8Decoded();

要在服务器上创建一个带有单个 OK 按钮并显示 div 元素“Hello World”的 PopupPanel，请编写类似如下的代码：

PopupPanel popup = new PopupPanel();
HtmlGenericControl div = new HtmlGenericControl("div");
div.Style.Add("padding", "5px");
div.InnerHtml = "Hello World";
popup.Content.Controls.Add(div);
Page.Form.Controls.Add(popup);
popup.ShowButtonOne = true;
popup.ButtonOneText = "OK";
popup.ButtonOneOnClick = popup.ClientID + "Obj.close(); return false;";

代码附带一个示例静态 MessageBox 类，该类演示了 PopupPanel 的这种用法。

资源

[1]	Nikhil Kothari 和 Vandana Datye 的《Developing Microsoft ASP.NET Server Controls and Components》，Microsoft Press
[2]	Ray Djajadinata 的《Create Advanced Web Applications With Object-Oriented Techniques》，MSDN Magazine 2007 年 5 月
[3]	ASP.NET Ajax 网站

反馈

非常希望收到以下方面的反馈：

• 除了三个按钮之外，还有其他方法可以在页脚中提供按钮功能吗？
• 在 IE6 或其他浏览器中，调整大小函数会是什么样的？

历史

• 2007 年 7 月 31 日 -- 发布原始版本
• 2007 年 8 月 2 日 -- 更新了源代码下载
• 2008 年 9 月 22 日 -- 更新了演示