Click here to Skip to main content
Click here to Skip to main content

Message Popup for Errors, Warnings, Success and Information Message With ModalPopup

, 25 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Create a custom message box that comes up in AJAX way. A single message box to show Information messages, Warnings, Errors and Success messages.

Introduction 

Today I am going to create a custom message box that comes up in AJAX way. A single message box to show Information messages, Warnings, Errors and Success messages.

Problem is that we use alert box to show messages and it has different view in browsers. We can't render any html in alert box. So we need something compatible with our website look and feel. We are going to use ModalPopup of Ajaxtoolkit to achieve this. Read more about ModalPopup. There are number of jQuery Message box available but people are scare of  jQuery/JavaScript stuff. In Webforms we most of the time use AjaxToolkit controls. They are easy to use and handle. So first a little about the AJAX Control Toolkit.

What is the ASP.NET AJAX Control Toolkit?

The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience. See more 

Let's Start    

  1. First create a Web Form Website/Application
  2. Get Ajax Control Toolkit respective framework DLL [AjaxControlToolkit.dll] from CodePlex ..
  3. Add this DLL to the Bin folder
  4. Add Reference in project and select AjaxControlToolkit.dll from Bin folder
  5. Register Ajaxtoolkit on pages.. There are two ways either add in web.config like
    <configuration>
      <system.web>
        <pages>
          <controls>
            <add tagPrefix="ajaxToolkit" 
              assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
          </controls>
        </pages>
      </system.web>
    </configuration>

    or you can add on each page where you want to use AjaxToolkit:

    <%@ Register TagPrefix="ajaxToolkit" 
      Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
  6. Add page to the website named MessagePopup.aspx and select "Place code in separate file" option. This add two files MessagePopup.aspx which contains html and asp controls and MessagePopup.aspx.cs where all the server side code resides.
  7. Add UpdatePanel and inside it add ModalPopup and Message Panel to Page.. See Below My ASPX page
  8. <%@ Page Language="C#" AutoEventWireup="true" 
      CodeFile="MessagePopup.aspx.cs" Inherits="MessagePopup" %>
    
    <!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>
        <style type="text/css">
            .MessageBoxPopupBackground
            {
                filter: Alpha(Opacity=40);
                -moz-opacity: 0.4;
                opacity: 0.4;
                width: 100%;
                height: 100%;
                background-color: #999999;
                position: absolute;
                z-index: 500001;
                top: 0px;
                left: 0px;
            }
            .popupHeader
            {
                float: left;
                padding: 5px 0px 0px 0px;
                width: 420px;
                font-family: tahoma;
                font-weight: bold;
                height: 25px;
                text-decoration: none;
                background-image: url("images/body_tab_top.jpg");
                background-repeat: repeat-x;
                color: #FFFFFF;
            }
            .popupHeader span
            {
                color: #fff;
                text-decoration: none;
                line-height: 15px;
                text-decoration: none;
                float: left;
                margin-left: 10px;
            }
            .popupHeader a
            {
                color: #fff !important;
                text-decoration: none !important;
                line-height: 15px;
                text-decoration: none;
                float: right;
                margin-right: 10px;
            }
            .popup_button
            {
                color: #fff !important;
                font-family: arial, Geneva, sans-serif;
                font-size: 12px;
                font-weight: normal;
                text-decoration: none !important;
                width: auto;
                background-image: url('images/button_bg.jpg');
                background-repeat: repeat-x; /*height: 24px;*/
                line-height: 22px;
                padding: 3px 15px 3px 15px;
                float: left;
                margin: 0px 0px 0px 5px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1" />
        <asp:UpdatePanel runat="server" ID="upMain">
            <ContentTemplate>
                <asp:Button runat="server" ID="btnShow" 
                  OnClick="btnShowSuccess_Click" Text="Success" />
                <asp:Button runat="server" ID="Button1" 
                  OnClick="btnShowError_Click" Text="Error" />
                <asp:Button runat="server" ID="Button2" 
                  OnClick="btnShowWarning_Click" Text="Warning" />
                <asp:Button runat="server" ID="Button3" 
                  OnClick="btnShowMessage_Click" Text="Message" />
                <%--Message popup area start--%>
                <asp:Button runat="server" ID="btnMessagePopupTargetButton" Style="display: none;" />
                <ajaxToolkit:ModalPopupExtender ID="mpeMessagePopup" runat="server" PopupControlID="pnlMessageBox"
                    TargetControlID="btnMessagePopupTargetButton" OkControlID="btnOk" CancelControlID="btnCancel"
                    BackgroundCssClass="MessageBoxPopupBackground">
                </ajaxToolkit:ModalPopupExtender>
                <asp:Panel runat="server" ID="pnlMessageBox" 
                       BackColor="White" Width="420" 
                       Style="display: none; border: 2px solid #780606;">
                    <div class="popupHeader" style="width: 420px;">
                        <asp:Label ID="lblMessagePopupHeading" Text="Information" 
                            runat="server"></asp:Label><asp:LinkButton
                            ID="btnCancel" runat="server" 
                             Style="float: right; margin-right: 5px;">X</asp:LinkButton>
                    </div>
                    <div style="max-height: 500px; width: 420px; overflow: hidden;">
                        <div style="float:left; width:380px; margin:20px;">
                            <table style="padding: 0; border-spacing: 0; border-collapse: collapse; width: 100%;">
                                <tr>
                                    <td style="text-align: left; vertical-align: top; width: 11%;">
                                        <asp:Literal runat="server" ID="ltrMessagePopupImage"></asp:Literal>
                                    </td>
                                    <td style="width: 2%;">
                                    </td>
                                    <td style="text-align: left; vertical-align: top; width: 87%;">
                                        <p style="margin: 0px; padding: 0px; color: #5F0202;">
                                            
                                                <asp:Label runat="server" ID="lblMessagePopupText"></asp:Label>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right; vertical-align: top;" colspan="3">
                                        <div style="margin-right: 0px; float: right; width: auto;">
                                            <asp:LinkButton ID="btnOk" runat="server" 
                                                CssClass="popup_button">Ok</asp:LinkButton>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </asp:Panel>
                <%--Message popup area end--%>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>

    I used following ModalPopup properties

    • TargetControlID - The ID of the element that activates the modal popup. In our case it is "btnMessagePopupTargetButton" and it hidden on page. We will call popup from code behind by its show() method.
    • PopupControlID - The ID of the element to display as a modal popup. It's our custom designed panel "pnlMessageBox".
    • BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed. Our CSS class is "MessageBoxPopupBackground" which shows popup in center of page.
    • OkControlID - The ID of the element that dismisses the modal popup. "btnOk" added to the message panel
    • CancelControlID - The ID of the element that cancels the modal popup "btnCancel" added to the message panel

    Note: Most importantly i use Literal control "ltrMessagePopupImage" for image. As in Update Panel ImageUrl do not refresh and change in image URL from code behind do not reflect on page. I am adding html image from code with respective image URL.
     
  9. Write button click events to show messages on page.. See code behind file of page
  10. using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class MessagePopup : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        protected void btnShowMessage_Click(object sender, EventArgs e)
        {
            ShowPopupMessage("We have created a message box popup for our site.", 
              PopupMessageType.Message);
        }
    
        protected void btnShowSuccess_Click(object sender, EventArgs e)
        {
            ShowPopupMessage("Custom success box created successfully for our site!", 
              PopupMessageType.Success);
        }
    
        protected void btnShowWarning_Click(object sender, EventArgs e)
        {
            ShowPopupMessage("This is a warning message box!", 
              PopupMessageType.Warning);
        }
    
        protected void btnShowError_Click(object sender, EventArgs e)
        {
            try
            {
                throw new Exception("Some error in code! Kindly contact your " + 
                  "administrator for more details.<br/> Thanks");
            }
            catch (Exception ex)
            {
                ShowPopupMessage(ex.Message, PopupMessageType.Error);
            }
        }
    
        /// <summary>
        /// Details: Change modal popup image according to PopupMessageType
        /// </summary>
        /// <param name="message"></param>
        /// <param name="messageType"></param>
        private void ShowPopupMessage(string message, PopupMessageType messageType)
        {
            switch (messageType)
            {
                case PopupMessageType.Error:
                    lblMessagePopupHeading.Text = "Error";
                    //Render image in literal control
                    ltrMessagePopupImage.Text = "<img src='" + 
                      Page.ResolveUrl("~/images/imgError.png") + "' alt='' />";
                    break;
                case PopupMessageType.Message:
                    lblMessagePopupHeading.Text = "Information";
                    ltrMessagePopupImage.Text = "<img src='" + 
                      Page.ResolveUrl("~/images/imgInformation.png") + "' alt='' />";
                    break;
                case PopupMessageType.Warning:
                    lblMessagePopupHeading.Text = "Warning";
                    ltrMessagePopupImage.Text = "<img src='" + 
                      Page.ResolveUrl("~/images/imgWarning.png") + "' alt='' />";
                    break;
                case PopupMessageType.Success:
                    lblMessagePopupHeading.Text = "Success";
                    ltrMessagePopupImage.Text = "<img src='" + 
                      Page.ResolveUrl("~/images/imgSuccess.png") + "' alt='' />";
                    break;
                default:
                    lblMessagePopupHeading.Text = "Information";
                    ltrMessagePopupImage.Text = "<img src='" + 
                      Page.ResolveUrl("~/images/imgInformation.png") + "' alt='' />";
                    break;
            }
    
            lblMessagePopupText.Text = message;
            mpeMessagePopup.Show();
        }
    
        /// <summary>
        /// Message type enum
        /// </summary>
        public enum PopupMessageType
        {
            Error,
            Message,
            Warning,
            Success
        }
    }

    I have created enum for Message popup types. So just need to pass type, the code will show respective heading and image for that type.

    See output below:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nassermalek

United States United States
No Biography provided

Comments and Discussions

 
Questionsample Pinprofessionalsaeed dehghani1-Jul-14 19:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 25 Jul 2013
Article Copyright 2013 by Nassermalek
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid