How to create Alert Message Box for the whole application

We often have to display Alert Dialog for the end user to show message about information or error. Here I show you how to create Alert Message Box using ModalPopupExtender in User Control. By using User Control and Master Page, it can be re-used elsewhere in the site.

Alert Message Box

First, create the user control (AlertMessage.ascx) and then add CSS and the server control as below :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<style type="text/css">
    .modalPopup
    {
        background-color: #ffffdd;
        border-width: 3px;
        border-style: solid;
        border-color: Gray;
        padding: 3px;
        width: 350px;
        border-radius: 5px;
    }
    .modalBackground
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }
</style>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:HiddenField ID="hfMessage" runat="server"></asp:HiddenField>
        <asp:Panel ID="Panel1" runat="server"  CssClass="modalPopup">
            <table style="width : 100%;">
                <tr>
                    <td>
                        <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr align="center">
                    <td>
                        <asp:Button ID="btnOK" runat="server" Text="OK"/>
                    </td>
                </tr>
            </table>
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
            PopupControlID="Panel1" TargetControlID="hfMessage" OkControlID="btnOK" Enabled="True">
        </asp:ModalPopupExtender>
    </ContentTemplate>
</asp:UpdatePanel>

In code-behind, create property and function as shown below :

public event EventHandler MessagePostback
{
    add { btnOK.Click += value; }
    remove { btnOK.Click -= value; }
}
public string UrlPostback
{
    get { return hfMessage.Value; }
    set { hfMessage.Value = value;}
}
public void ShowMessage(string msg, string urlPostback = "")
{
    try
    {
        lblMessage.Text = msg;
        UrlPostback = urlPostback;
        if (string.IsNullOrEmpty(msg)) return;
        if(!string.IsNullOrEmpty(urlPostback))
            ModalPopupExtender1.OkControlID = string.Empty;

        btnOK.Focus();
        ModalPopupExtender1.Show();
        UpdatePanel1.Update();
    }
    catch(Exception ex)
    {
        lblMessage.Text = ex.GetBaseException().Message;
        UpdatePanel1.Update();
        return;
    }
}

Then, create Master page (MasterPage.master) and then add ScriptManager and the user control we created as below:

<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server">
</asp:ScriptManager>
<div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
<uc1:AlertMessage ID="AlertMessage1" runat="server" OnMessagePostback="AlertMessage1_PostBack" />
</form>

In code-behind, create one method and one event handler as follow :

public void ShowMessage(string msg, string urlPostBack= "")
{
    AlertMessage1.ShowMessage(msg, urlPostBack);
}
protected void AlertMessage1_PostBack(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(AlertMessage1.UrlPostback))
        Response.Redirect(AlertMessage1.UrlPostback);
}

Next, create one .aspx page (TestMessage.aspx) using Master Page we created before and add "MasterType" directive to call Master Page's method as below :

<%@ MasterType VirtualPath="~/MasterPage.Master" %>

In code-behind, copy the following code to Page_Load event as shown below :

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        try
        {
            throw new ApplicationException("This is test.");
        }
        catch (Exception ex)
        {
             //Call Master's ShowMessage method whenever you want to show Alert Dialog.  
             //Pass the Url parameter when you want redirect to somewhere after OK button press.
             this.Master.ShowMessage(ex.Message, "default.aspx");
        }
    }
}

That's it. When you run "TestMessage.aspx", it show the Alert Message. By clicking "OK" button, it close. Otherwise, it redirect to Url you pass.