ASP.NET 服务器端消息与客户端验证消息处理。

4.67/5 (30投票s)

2011年5月19日

CPOL

5分钟阅读

114732

3482

在模态框中显示不同类型的客户端和服务器端消息。

下载源代码 - 53.79 KB

引言

在开发 Web 应用程序时，我们大多数时候都需要在客户端的对话框中显示服务器端消息。您的服务器端消息可以属于以下任何类别：

错误消息
成功消息
信息
警告消息

很多时候，我们也希望在模态对话框中显示页面的验证摘要。有很多 jQuery 插件可以帮助实现这一点，但我发现它们并不适合我的场景。

在本文中，我将展示如何在客户端以一种可呈现的格式显示这些消息。我不会详细解释代码，代码非常简单，您可以从源代码中轻松找出。

如何使用 ValidationSummary 控件？

简单来说，ValidationSummary 控件用于显示网页中发生的所有验证错误的摘要。此控件中显示的错误消息由每个验证控件的 ErrorMessage 属性指定。

有关此控件的更多详细信息，您可以查看此链接。

ASP.NET 提供了许多验证控件，我们也可以根据需要编写自己的自定义验证控件。使用这些验证控件，我们可以将附加的错误消息显示在页面上的任何位置。有关更多详细信息，您可以查阅 MSDN。

但很多时候，将错误消息与控件一起显示并不美观；我们可能希望将摘要集中在一起显示。为了支持这一点，Microsoft 提供了 Validation Summary 控件。我们将使用 Validation Summary 控件在模态框中显示消息。ValidationSummary 控件有一个限制，它只能处理单个验证组或整个页面的验证。如果我们页面中使用了多个验证组，那么在页面中需要有多个 Validation Summary 控件，每个 ValdiationSummary 控件针对一个特定的组。

在我们的场景中，我们的消息控件使用了 7 个不同的 ValidationSummary 控件，假设一个页面最多可以有 7 个验证组。如果您的页面有超过 7 个 ValdiationGroup，您可以将更多的 Validation Summary 控件添加到消息控件中。

<asp:ValidationSummary ID="summary1" ValidationGroup="V1" runat="server" />
<asp:ValidationSummary ID="summary2" ValidationGroup="V2" runat="server" />
<asp:ValidationSummary ID="summary3" ValidationGroup="V3" runat="server" />
<asp:ValidationSummary ID="summary4" ValidationGroup="V4" runat="server" />
<asp:ValidationSummary ID="summary5" ValidationGroup="V5" runat="server" />
<asp:ValidationSummary ID="summary6" ValidationGroup="V6" runat="server" />
<asp:ValidationSummary ID="summary7" ValidationGroup="V7" runat="server" />

输出

单个验证

多个验证组

组 1

组 2

错误消息

警告消息

成功消息

实现

为了实现上述类型的消息，我创建了一个 Web 用户控件。该控件包含一些 JavaScript 代码，用于在看起来像模态框的 div 中显示消息。您只需要将该控件拖放到您的母版页或页面中。

要调用客户端验证，您需要将客户端脚本附加到您的按钮上，以显示验证摘要。

附加客户端脚本的代码如下所示：

  <asp:Button ID="Button2" ValidationGroup="V2" 
            runat="server" OnClick="Button1_Click" 
            OnClientClick="ValidateJs('V2');"
                        Text="Post" />

在上面的代码片段中，您需要像 OnClientClick="ValidateJs('V2');" 这样附加 OnClientClick 事件，其中 ‘V2’ 是验证组名称。

function ValidateJs(validationGroupName) {
        if (typeof (Page_ClientValidate) == 'function') {
            var validationResult = Page_ClientValidate(validationGroupName);
            if (validationResult == false) {

                if (!Page_IsValid) {
                    LoadMessage(validationGroupName);
                }
            }
        }
    }

上面的函数使用 Page_ClientValidate 函数检查提供的组是否有效（意味着它是否包含验证错误），如果找到一些错误并且页面状态对于验证控件无效，则调用 LoadMessage 函数，该函数会打开模态对话框。LoadMessage 的代码是：

    function LoadMessage(grpName) {
        var header = document.getElementById("<%=lblHead.ClientID%>");
        var img = document.getElementById("<%=imgMsgType.ClientID%>");
        var tbl = document.getElementById("<%=tblMessage.ClientID%>");
        if (header != null && img != null && tbl != null) {
            img.src = "images/validation.png";
            header.innerHTML = "Validation Error [Group : " + grpName + "]";
            tbl.style.backgroundColor = "#AE1F24";
        }
        showPopup();
    }

如何显示服务器端消息？

为了识别从服务器引发的不同类型的消息，我创建了一个 Enum，其代码片段如下：

    public enum MessageType
    {
        Success,
        Warning,
        Error
    }

为了显示服务器端消息，我创建了一个 BasePage，它继承自 System.Web.UI.Page 类，我所有的页面都将继承 BasePage 类。BasePage 类如下所示：

using ValidationMessage.Controls;

namespace ValidationMessage
{
    public class BasePage : System.Web.UI.Page
    {
        public void ShowErrorMessage(string message)
        {

            Show(message, MessageType.Error);
        }
        public void ShowWarningMessage(string message)
        {
            Show(message, MessageType.Warning);
        }
        public void ShowSuccessMessage(string message)
        {
            Show(message, MessageType.Success);
        }
        private void Show(string message, MessageType messageType)
        {
            if (Page.Master != null)
            {
                Message popMsg = Page.Master.FindControl("MsgControl") as Message;
                if (popMsg != null)
                {
                    popMsg.ShowPopMessage(message, messageType);
                }
            }
        }
    }
}

如果您想从服务器端在任何事件中向客户端显示任何消息，您只需要调用适当的基类方法，如下所示：

  protected void SuccessButton_Click(object sender, EventArgs e)
        {
            ShowSuccessMessage(
                string.Format(
                "{0}<br> Message: {1}<br> Time: {2}"
                ,"'SUCCESS' message sent by server."
                ,MessageText.Text
                ,DateTime.Now));
        }

        protected void ErrorButton_Click(object sender, EventArgs e)
        {
            ShowErrorMessage(
                string.Format(
                "{0}<br> Message: {1}<br> Time: {2}"
                , "'ERROR' message sent by server."
                , MessageText.Text
                , DateTime.Now));
        }

        protected void WarningButton_Click(object sender, EventArgs e)
        {
            ShowWarningMessage(
               string.Format(
               "{0}<br> Message: {1}<br> Time: {2}"
               , "'WARNING' message sent by server."
               , MessageText.Text
               , DateTime.Now));
        }

客户端 API

不一定总是需要从服务器端代码仅在网页中显示消息，在许多情况下，我们希望使用 JavaScript 代码在客户端显示消息。为了适应这一点，我们将使用相同的消息控件，以便 UI 在服务器端和客户端消息这两种情况下看起来完全相同。

为了触发客户端消息，我编写了一个 JavaScript 函数 ShowClientSide。该函数需要四个参数：

头部图片 URL
头部文本（例如“警告”）
头部背景颜色
消息

ShowClientSide 的 JavaScript 代码如下：

function ShowClientSide(imgSrc, headerText, headerBGColor, messageText) {
        var header = document.getElementById("<%=lblHead.ClientID%>");
        var img = document.getElementById("<%=imgMsgType.ClientID%>");
        var tbl = document.getElementById("<%=tblMessage.ClientID%>");
        var spn = document.getElementById("<%=spnText.ClientID %>");
        if (header != null && img != null && tbl != null && spn!=null) {
            img.src = imgSrc;
            header.innerHTML = headerText;
            tbl.style.backgroundColor = headerBGColor;
            spn.innerHTML = messageText;
        }
        showPopup();       
    }

注意，您需要将上面的 JavaScript 函数添加到 Message.ascx 中，因为我们在函数中使用 <%=lblHead.ClientID%> 和其他内联标签，这些是控件特定的。

您可以按如下方式调用客户端消息：

ShowClientSide('images/validation.png', 'Client Side Message', 
	'#AE1F24','Message raised from client side script');

AJAX 支持

消息控件被包装在 UpatePanel 中以支持任何 AJAX 行为。UpdateMode 属性设置为 “Always”，以便 UpdatePane 控件的内容在页面上任何地方引发的每次回发时都会更新。在正常情况下，消息控件不必放在更新面板中，所有消息都可以从页面的任何部分调用。UpdateMode=”Always” 包括来自其他 UpdatePanel 控件内部控件的异步回发，以及来自不属于 UpdatePanel 控件的控件的回发。

结论

为了简化消息处理，我创建了一个单一的 Web 用户控件，可以无需太多支持代码即可使用。理想情况下，消息控件应该是一个库形式的自定义控件，但我由于时间不足目前尚未做到。我可能会在将来更新文章，提供更新后的控件。