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.

Simple jQuery Confirm and Alert Dialogs

These days, JQuery is getting more powerful and more useful for rich interactive web application. For myself, I used a lot of JQuery for web interface and ajax pattern. Here, I show you the simple and easy way to use the beautiful jquery Confirm and Alert popup as below.

JQuery confirm popup

First, you need to download the jquery library and resource here (it inclueds images, css and js file.).
Put the following code to <head> tag.

<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 function ConfirmPopup() {
   jConfirm('Can you confirm to leave page?', 'Confirmation Message', function (r) {
     if (r) {
       jAlert('Please visit again.', 'Alert Message' , function (r) {
         window.location = 'http://www.aspmemo.net';
       });
     }
   });
}

Create the sever button control like this.

<asp:button id="Button1" onclick="Button1_Click" runat="server" text="Show Confirm">

In that button click event, we register the created javascript function to call.

protected void Button1_Click(object sender, EventArgs e)
{
 Page.ClientScript.RegisterStartupScript(this.GetType(), "popupScript", "ConfirmPopup()", true);
}

That's it. When you clicks the button, it show Confirm popup and then click on Ok button, it show Alert pop and click on OK again, it redirects to one url.

More details bout this JQuery Plugin