65.9K
CodeProject 正在变化。 阅读更多。
Home

消息框控件

Ali Al Omairi (Abu AlHassan)
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.91/5 (22投票s)

2011年5月14日

CPOL

3分钟阅读

viewsIcon

62386

downloadIcon

2305

可以用 HTML 和 CSS 绘制的消息框。

引言

大多数应用程序，或者说所有应用程序，都需要一种机制来在必要时通知用户。在 Windows 应用程序中，MessageBox[^] 可以通过提供一个带有以下内容的模态对话框来解决这个问题：

  • 一个可以代表消息来源的标题
  • 一个用于每个消息类型的图标，以确定消息框的紧急程度
  • 一条简短的文本消息
  • 一些可以代表用户决定的命令按钮
  • 以及一个唯一的系统声音，用于告知消息框的紧急程度
save cofirmation

不幸的是，在 Web 应用程序中，此功能不存在。它被 JavaScript 的 alert() 和 confirm() 所取代，而这些无法由设计者控制。

alert confirm

在本文中，我们将介绍一个看起来像 Windows 应用程序的消息框，但具有额外的设计特性和一些处理 Web 环境的行为。

Style1 Style1

背景

本文基于 确认消息框[^] 中讨论的概念，以及来自 System.Windows.Forms.MessageBox[^] 类的一些特性。

Using the Code

该控件，就像 System.Windows.Forms.MessageBox[^] 一样，提供了 Show() 方法的重载，并且还提供了 RegisterButtonForShowigMessage()，其中包含一个额外的参数来保存按钮引用。

该控件还提供了三个类型为 MessageBoxButtonAction 的额外参数，它有四个值：

  • Undefined：不执行任何操作
  • AcceptDialog：重新触发调用按钮的回发事件
  • Close：关闭对话框并在客户端触发 ClientResultReturn 事件
  • PostBack：关闭对话框并在服务器端触发 ResultReturn 事件

该控件还提供了八个类型为 String 的属性，用于自定义按钮上的文本。

  • OKButtonText：用于“确定”命令按钮文本
  • CancelButtonText：用于“取消”命令按钮文本
  • AbortButtonText：用于“中止”命令按钮文本
  • RetryButtonText：用于“重试”命令按钮文本
  • IgnoreButtonText：用于“忽略”命令按钮文本
  • YesButtonText：用于“是”命令按钮文本
  • NoButtonText：用于“否”命令按钮文本
  • 以及 CloseButtonText：用于对话框关闭按钮文本

您可以像这样使用该控件：

MessageBox MessageBox1 = MessageBox.GetCurrent(this);
MessageBox1.OnClientResultReturn = "OnCloseDialig";

MessageBox1.RegisterButtonForShowigMessage(cmdClose, 
  "Do you want to save this transaction before exiting the page?",
  "My Application", "Exit", MyControls.MessageBoxButtons.YesNoCancel,
  MyControls.MessageBoxIcon.Exclamation, MyControls.MessageBoxDefaultButton.Button1,
  MyControls.MessageBoxButtonAction.PostBack,
  MyControls.MessageBoxButtonAction.PostBack, 
  MyControls.MessageBoxButtonAction.Close);

您还可以添加一个 JavaScript 函数来处理 ClientResultReturn 事件，如下所示：

function OnCloseDialig(sender, e) {
    var args = sender.get_Tag().split(',');

    if (args[0] == 'Copy')
        if (e.get_DialogResult() == MyControls.DialogResult.Abort ||
        e.get_DialogResult() == MyControls.DialogResult.OK)
        $get('<%= loader.ClientID %>').style.display = 'none';
}

该方法将在消息框关闭后立即被调用。

要处理控件的服务器端事件 ResultReturn，您只需向该事件添加一个处理程序。在处理方法中，您可以使用 th 的 Tag 属性来获取消息源，还可以使用事件参数的 DialogResult 属性。例如：

void MessageBox1_ResultReturn(object sender, MessageBoxEventArgs e)
{
    MessageBox MessageBox1 = (sender as MessageBox );

    string[] args = MessageBox1.Tag.Split(new char[] { ',' },
			StringSplitOptions.RemoveEmptyEntries);

    string command = string.Empty;
    string[] commandargs = null;

    if (args.Length > 0)
        command = args[0];

    if (args.Length > 1)
    {
        commandargs = new string[args.Length - 1];
        for (int i = 1; i > args.Length; i++)
            commandargs[i - 1] = args[i];
    }

    switch (command)
    {
        case "Copy":
            ContiueCoping(e.DialogResult, commandargs[0]);
            break;
        case "Exit":
            ExitPage(e.DialogResult);
            break;
    }
}

最后，要获得要添加到脚本块的 OpenDialog() 函数的引用，我们可以使用与上面讨论的 Show() 相同的参数调用方法 GetOpenDialogReference()。如下所示：

StringBuilder validateSelectionBuilder = new StringBuilder();
validateSelectionBuilder.AppendLine("function ValidateSelection(sender, e){");
validateSelectionBuilder.AppendLine("    var count = getCheckedItemsCount('AddItems');");
validateSelectionBuilder.AppendLine(string.Format(
  "  if(count == 0) {{ {0} e.IsValid = false; }}", 
  MessageBox1.GetOpenDialogReference("Please select at least one item.", 
  "My Application", "AddItems", 
  MessageBoxButtons.OK, MessageBoxIcon.Exclamation, 
  MessageBoxDefaultButton.Button1, 
  new MessageBoxButtonsAcionProvider(MessageBoxButtonAction.Close))));

validateSelectionBuilder.AppendLine(string.Format(
  "  else if(count > 3) {{ {0} e.IsValid = false; }}", 
  MessageBox1.GetOpenDialogReference(
  "You can not add more than three items at a time.", "My Application", 
  "AddItems", MessageBoxButtons.OK, MessageBoxIcon.Exclamation, 
  MessageBoxDefaultButton.Button1, 
  new MessageBoxButtonsAcionProvider(MessageBoxButtonAction.Close))));

validateSelectionBuilder.AppendLine("    else e.IsValid = true;");
validateSelectionBuilder.AppendLine("}");

关注点

与 确认消息框[^] 不同，我们不需要保留消息框对象的多个实例。因此，我们首先在 OnInit() 方法中将该对象添加到 Page.Items 集合。

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);

    if (!base.DesignMode)
    {
        if (GetCurrent(this.Page) != null)
        {
            throw new InvalidOperationException(
              "Only One MessageBox instance is allowed.");
        }
        Page iPage = this.Page;
        iPage.Items[typeof(MessageBox)] = this;
    }
}

之后，我们可以通过使用 MessageBox.GetCurrent() 方法，从任何其母版页包含该控件的内容页，甚至是页面中的控件中使用此集合。

public static MessageBox  GetCurrent(Page page)
{
    if (page == null)
    {
        throw new ArgumentNullException("page");
    }
    return (page.Items[typeof(MessageBox)] as MessageBox);
}

历史

  • 2011 年 5 月 14 日星期六
    • First version.
  • 2011 年 5 月 15 日星期日
    • 添加了描述 ClientResultReturn 的段落
  • 2011 年 6 月 6 日星期一
    • 添加了一个段落来描述事件 ResultReturn
    • 更改了控件的 HTML 布局
    • 修复了控件的默认样式
    • 添加了一个示例 * .htm * 文件
    • 修复了兼容性视图中的 JavaScript 函数 OpenDialog()
    • 修复了从服务器端调用 Show() 方法时 JavaScript 函数 AcceptDialog() 的行为
  • 2011 年 10 月 30 日星期日
    • 更改了文章的介绍
    • 修复了 Google Chrome 上的 JavaScript 错误
    • 添加了方法 GetOpenDialogReference() 和描述它的段落
  • 2012 年 3 月 22 日星期四
    • 修复了 IE6 中的样式问题。
    • 编辑了示例以包含全球化。
© . All rights reserved.