ASP.NET WebForms 的自定义 MessageBox、ConfirmBox 和 FrameBox 控件

• 下载 ProudMonkey3.5_V1.zip - 28.6 KB
• 下载 ProudMonkey4.0_V2.zip - 1.1 MB
• 下载 ProudMonkey4.0_V3.zip - 1.7 MB

引言

在这篇文章中，您将学习 ASP.NET WebForms 的自定义 MessageBox、ConfirmBox 和 FrameBox 控件，以及如何在您的应用程序中使用它们。

背景

我看到很多开发人员在各种技术论坛上提问：

• 我如何从服务器（代码后台）显示消息框？
• 我如何自定义 JavaScript 确认和警报弹出窗口？
• 我如何像 Windows 应用程序一样显示消息框？

想法

正如你们中有些人可能已经知道的，在 Web 编程中显示弹出消息框对大多数开发人员来说一直是个难题。在 ASP.NET WebForms 的上下文中，每个人可能都使用过 Page.ClientScript.RegisterStartupScript 或 ScriptManager.RegisterClientScriptBlock 方法来调用 JavaScript alert 和 confirm 函数，以便在网页中显示通用消息框。

我之前在一个项目中工作，该项目之前使用了许多弹出消息来根据某些操作向最终用户提示消息。起初，我只是简单地使用 JavaScript alert 和 confirm 函数来提示用户消息，直到我意识到使用简单的 JavaScript alert/confirm 函数会使页面在“外观”方面变得丑陋，因为我无法自定义它以符合网页配色方案。另一件事是我需要根据各种操作向最终用户提示，例如我需要在一个成功操作发生时显示一个成功的消息弹出窗口，而使用 JavaScript alert 显示成功消息可能会让最终用户感到困惑，因为它使用了默认的警告图像。为了克服这些问题，我可以简单地在页面中创建一个模态面板并应用一些 CSS 来设置消息框的外观，但这对来说不是一个好方法。为什么？主要有两个原因：可维护性和可重用性。由于我需要一个可以在多个应用程序中重用并且易于维护的弹出消息，所以我决定创建一个复合控件来创建自定义控件。

主要特点

以下是这些控件的主要功能：

• 这些控件的设计目的是让开发人员可以轻松地在页面中提示消息，无论是通过服务器端还是客户端使用，而无需太多代码，并向最终用户呈现用户友好的消息。
• 这些控件是作为通用控件创建的，可以在应用程序中重用。此控件的维护要容易得多，因为对其进行的任何更改都将反映给所有使用它的地方。
• 这些控件为开发人员提供了选择向最终用户显示何种类型消息的选项，而标准的 JavaScript alert/confirm 则没有。它还使最终用户受益，因为这些控件提供了一个用户友好的界面，并且每种消息类型都以不同的配色方案和图标呈现，因此最终用户可以轻松识别消息。这些将帮助开发人员在应用程序中拥有一致的消息框，并向最终用户提供更精美的消息框。
• 控件的最新版本（版本 4）公开了一些可用于更改外观的属性。

控件版本和下载位置

这些控件完全免费！源代码可以在 CodePlex 上找到并下载。这是链接：

• http://proudmonkeycontrols.codeplex.com/

以下是可下载的版本：

• ProudMonkey Controls 版本 3（最新）：这是控件的最新版本，与 ASP.NET 4.0 和 AjaxControlToolkit ACT v4.1.51116.0 兼容。
• ProudMonkey Controls 版本 2：此版本与 ASP.NET 4.0 和 AjaxControlToolkit v4.1.40412.0 兼容。
• ProudMonkey Controls 版本 1：此版本与 ASP.NET 3.5 和 AjaxControlToolkit v3.0.1106.0 兼容。

请注意 ASP.NET 和 AjaxControlToolkit 版本。

自行滚动版本

如果您希望使用不同版本的 AjaxControlToolkit，或者如果您想在 .NET 4.5 或 .NET 4.6 版本中使用它，那么这里有一个技巧：

• 转到源代码并获取 ControlLibrary 项目。您可以在这里获取它：
  • http://proudmonkeycontrols.codeplex.com/SourceControl/latest
• 将 ControlLibrary 项目添加到您的 ASP.NET 4.5 项目中。
• 添加/替换您当前使用的 AjaxControlToolkit 版本。
• 生成项目。
• 然后使用生成的 DLL。

使用控件

MessageBox

MessageBox 控件：此控件为开发人员提供了提示各种消息类型的选项，例如信息、警告、成功和错误消息类型。此控件可以通过服务器端或客户端调用。以下是 MessageBox 控件的一些屏幕截图。

控件的集成

1. 下载并解压 ProudMonkey.Common.Controls.dll。
2. 将 ProudMonkey.Common.Controls.dll 和 AjaxControlToolkit.dll 添加到您的项目解决方案中。
3. 右键单击项目并选择“添加引用”。
4. 单击“浏览”选项卡并找到步骤 2 中指定的两个 DLL。
5. 点击“确定”。
6. 通过在页面顶部 (ASPX) 添加以下行来注册控件。您也可以在 web.config 文件中注册它。这完全取决于您。

   <%@ Register assembly="ProudMonkey.Common.Controls"  
                namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>  
   <%@ Register assembly="AjaxControlToolkit"   
                namespace="AjaxControlToolkit" tagprefix="asp" %>

7. 由于 MessageBox 控件使用更高版本的 ASP.NET AJAX (AjaxControlToolKit)，因此请务必使用 ToolkitScriptManager 而不是 ScriptManager。ToolkitScriptManager 可以在 AjaxControlToolKit 控件中找到。
8. 然后定义 MessageBox 控件，如下所示：

   <cc1:MessageBox ID="MessageBox1" runat="server" /> 

9. 然后您就可以开始了。=}

使用 MessageBox 控件

服务器端方法（代码后台）

MessageBox1.ShowError("Your Message");//Displaying an Error message   
MessageBox1.ShowWarning("Your Message");//Displaying a Warning message  
MessageBox1.ShowInfo("Your Message");//Displaying an Information message 
MessageBox1.ShowSuccess("Your Message");//Displaying a Successful message

使用上面的代码可以显示默认大小 [高(125px) 和 宽(300px)] 的消息框。请注意，大小采用像素格式。如果您想手动设置 MessageBox 大小，则可以使用重载方法，例如：

MessageBox1.ShowError("Your Message",300,400); 

客户端方法 (JavaScript)

以下是您如何在 JavaScript 中使用 MessageBox 控件的代码片段：

ShowMsgBox('Error','Sample Error Message.'); 

上面的代码将显示类型为“error”的默认 MessageBox，其中包含您的消息。如果您想手动设置 MessageBox 大小，则可以使用重载方法，例如：

ShowMsgBox('Error','Sample Success Message.',300,400);  

注意：如果您在单击“确定”后不希望导致回发到服务器，请务必在客户端 (JavaScript) 调用 ShowMsgBox() 方法后包含“return false;”。

MessageBox 控件的客户端用法有所不同，因为我们需要通过指定第一个参数（如上所示）来告诉方法我们要向用户显示哪种消息类型。因此，如果您要通过 JavaScript 显示各种消息类型，则可以将以下任何值用作第一个参数：

• error
• 成功
• 信息
• 警告

确认框

ConfirmBox 控件：此自定义控件旨在提供更精美的确认消息外观，并为最终用户添加了“不再询问我”选项。众所周知，到目前为止，我们的标准是在应用程序中允许用户执行删除或关键操作的每个地方都包含此确认步骤。对于某些用户来说，此确认步骤变得有点烦人。所以我决定研究如何将典型的“不再询问我”复选框包含到我的 ConfirmationBox 控件中。

以下是 ConfirmBox 控件的示例屏幕截图：

注释

• “不再询问我”选项仅在会话期间记住，因此如果页面再次加载或刷新，则确认框将正常显示。
• “不再询问我”选项对于调用它的每个控件都是唯一的，因此如果您选择为“删除”按钮显示确认框，则“不再询问我”将仅应用于该按钮控件。
• 默认焦点设置为“否”。
• 此控件只能通过客户端调用。

ConfirmBox 控件的示例用法

ASPX 标记

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
        </asp:ToolkitScriptManager>  
        <asp:Label ID="Label1" runat="server" Text="Label" /> 
        <cc1:ConfirmBox ID="ConfirmBox1" runat="server" />  
        <asp:Button ID="Button1" runat="server" 
        Text="Button" onclick="Button1_Click"  
         OnClientClick="ShowConfirmBox(this,'Are you sure?'); return false;" />  
    </div>  
    </form>  
</body>  

代码后台 (C#)

using System;  
using System.Web;  
public partial class YetAnotherTest : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e) {  
  
    }  
    protected void Button1_Click(object sender, EventArgs e) {  
        Label1.Text = "Postback occured!";  
    }  
}  

FrameBox

FrameBox 控件：此自定义控件旨在允许开发人员显示模态类型的窗口，用于在其内部显示外部或内部站点。此控件还提供了一个属性，开发人员可以动态更改框架的标题文本。请看下面显示的示例屏幕：

FrameBox 控件的示例用法

<%@ Register assembly="ProudMonkey.Common.Controls" 
namespace="ProudMonkey.Common.Controls" 
             tagprefix="cc1" %>  
<%@ Register assembly="AjaxControlToolkit" 
namespace="AjaxControlToolkit" tagprefix="asp" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>  
    <cc1:FrameBox ID="FrameBox1" runat="server" />  
    <asp:Button ID="Button1" runat="server" Text="Button" 
        OnClientClick="ShowFrameBox('Vinz Blog',
        'http://geekswithblogs.net/dotNETvinz/Default.aspx');
        returnse;" />  
    </form>  
</body>  
</html>

自定义模态框

模态外观的自定义仅适用于新版本的 ProudMonkey 控件（版本 2 和 3，带 ASP.NET 4.0）。新版本提供了一些属性，您可以设置这些属性来自定义模态控件，包括标题、按钮、主体背景颜色、标题字体等。

自定义 MessageBox 模态

MessageBox 提供以下属性：

• HeaderImageUrl：此属性设置用作 MessageBox 标题背景的 ImageUrl。请注意，图像尺寸应为 2 x 28，因为此图像将水平重复。
• HeaderBackgroundColor：此属性设置 MessageBox 标题的背景颜色。如果您不想使用 MessageBox 的默认标题背景，或者您不想设置 HeaderImageUrl 属性，则可以使用此属性。
• HeaderTextColor：此属性设置 MessageBox 标题的文本前景色。
• HeaderTextFont：此属性设置 MessageBox 标题的文本字体。
• BodyBackgroundColor：此属性设置显示实际文本的 MessageBox 主体的背景颜色。
• BodyTextColor：此属性设置主体中显示的实际内容的文本前景色。
• BodyTextFont：此属性设置要在主体中显示的实际内容的文本字体。
• OKButtonImageUrl：此属性设置用作“确定”按钮背景图像的 ImageUrl。
• CloseButtonImageUrl：此属性设置用作“关闭”按钮背景图像的 ImageUrl。

注意：如果您不设置任何这些属性，则会自动应用默认样式。

示例用法

<cc1:MessageBox ID="MessageBox1" runat="server"   
     HeaderImageUrl="Images/header.png"  
     HeaderTextColor="White"  
     HeaderTextFont="Arial Black"  
     BodyBackgroundColor="#E1E5F0"  
     BodyTextFont="Tahoma"  
     BodyTextColor="#263F75"    
     OKButtonImageUrl="Images/btnOK.jpg"  
     CloseButtonImageUrl="Images/btnClose.jpg" />  

实际输出

自定义 ConfirmBox 模态

ConfirmBox 也提供与 MessageBox 相同的属性。唯一的附加属性是：

• YesButtonImageUrl：此属性设置用作“是”按钮背景图像的 ImageUrl。
• NoButtonImageUrl：此属性设置用作“否”按钮背景图像的 ImageUrl。

同样，如果您未在 ConfirmBox 控件中设置任何这些属性，则会自动应用默认样式。

示例用法

<cc1:ConfirmBox ID="ConfirmBox1" runat="server"  
     YesButtonImageUrl="Images/btnYes.jpg"  
     NoButtonImageUrl="Images/btnNo.jpg"  
     CloseButtonImageUrl="Images/btnClose.jpg"   
     HeaderImageUrl="Images/header.png"  
     HeaderTextColor="White"  
     HeaderTextFont="Arial Black" /> 

实际输出

自定义 FrameBox 模型

FrameBox 具有以下属性：

• HeaderImageUrl：此属性设置用作 FrameBox 标题背景的 ImageUrl。请注意，图像尺寸应为 2 x 28，因为此图像将水平重复。
• HeaderBackgroundColor：此属性设置 FrameBox 标题的背景颜色。
• HeaderTextColor：此属性设置 MessageBox 标题的文本前景色。
• HeaderTextFont：此属性设置 MessageBox 标题的文本字体。
• CloseButtonImageUrl：此属性设置用作“关闭”按钮背景图像的 ImageUrl。

示例用法

<cc1:FrameBox ID="FrameBox1" runat="server"  
     HeaderImageUrl="Images/header.png"  
     HeaderTextColor="White"  
     HeaderTextFont="Arial Black"  
     CloseButtonImageUrl="Images/btnClose.jpg" /> 

实际输出

更多内容！

• 使用控件
• 将控件与 UpdatePanel 结合使用
• 在 GridView 中使用 ConfirmBox
• 自定义模态框

就是这样！我希望您会发现此控件很有用。如果您发现任何错误，请告诉我。欢迎提出意见、建议和批评！:)

摘要

在这篇文章中，我们学习了如何在 ASP.NET WebForm 应用程序中使用自定义的 MessageBox、CofirmBox 和 FrameBox 控件。我们还学习了如何自定义模态框的外观。

历史

• 2016 年 10 月 10 日：添加可下载内容
• 2016 年 6 月 7 日：初始版本