确认消息框

• 下载演示和源代码 - 623.75 KB

引言

如你所知，任何Web应用程序中的某些操作都需要用户确认，以避免数据丢失（你知道，用户可能会不小心按下删除按钮）。因此，我们（开发人员）应该提供确认消息，询问用户是否确认其请求。通常，这是通过添加属性来实现的

OnClientClick="return confirm('Are you sure you want to delete this item?');"

但是，你觉得这看起来有点傻。我的意思是标题“来自网页的消息”、图标、确定/取消按钮以及浏览器绘制的整个消息，这可能会破坏整个页面的设计，请看

但是现在不一样了，我们可以提供一个使用 ModalPopupExtender 的确认消息，它可以将 div 或 panel 作为模态对话框显示。请看

有关 MessageBox 在 Web 中的完整实现，请查看 消息框控件[^]。

Using the Code

嗯……，使用这个确认消息框非常简单。在 Page Load 中，即使你需要找到消息框的引用，然后调用它的 RegisterButtonForConfirmation 方法，就像这样

ConfirmMessageBox ConfirmMessageBox1 = GetConfirmMessageBox1Reference();
IButtonControl deletebutton = GetdeletebuttonReference();
ConfirmMessageBox1.RegisterButtonForConfirmation(deletebutton, text, title);

此方法将在 onclick 事件中添加一些脚本到该按钮。该脚本在必要时调用 WebForm_DoPostBackWithOptions 函数以应用验证和其他回发选项，并调用 AcceptDialog() 函数，该函数打开确认对话框。

ConfirmMessageBox 还提供了一个 AutoPstBack 属性，用于在服务器端执行某些操作，例如保存事务。你还可以通过在 ConfirmMessageBox.css 中定义 CSS 类来为消息框指定你想要的样式。

那么，诀窍在哪里？

诀窍在于 OpenDialog() 和 AcceptDialog() 函数；首先：OpenDialog() 返回 false 以防止将链接按钮回发

OpenDialog: function(text, title, callingbuttonid) {
        $get(this.get_element().id + '_h_callingbuttonid').value = callingbuttonid;
        $get(this.get_element().id + '_lblTitle').innerText = title;
        $get(this.get_element().id + '_lblText').innerText = text;

        $find(this.get_element().id + '_extConfirmMessage').show();
        $get(this.get_element().id + '_cmdYes').focus();

        return false;
    },

而 AcceptDialog() 重新触发链接按钮的回发引用

AcceptDialog: function() {
    var callingbuttonid = $get(this.get_element().id + '_h_callingbuttonid').value;
    var callingbutton = $get(callingbuttonid);

    // raise postback event
    // Link buttons.
    if (callingbutton.tagName.toLowerCase() == 'a')
        window.location.href = callingbutton.href;
    // other buttons.
    else if (callingbutton.tagName.toLowerCase() == 'input') {
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;
        }

        var eventTarget = callingbutton.name;
        var eventArgument = '';
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }

    $get(this.get_element().id + '_h_callingbuttonid').value = '';
    $find(this.get_element().id + '_extConfirmMessage').hide();
},   

历史

• 2011年4月16日，星期六：第一个版本
• 2011年4月23日，星期六：处理了回发选项
• 2011年6月13日，星期一：添加了指向消息框控件的链接