Custom Alert Message using Ajax

In this blog you will learn how to show custom Alert Message using Ajax.

Custom Alert Message using Ajax

Sometimes we are required to create a clone of a Windows alert message, but that alert message is not allowing to change the header text.

Here using Ajax model popup extender, I will show you how to create a custom message box.

Add the user control file and ajaxtoolkit reference to your project.

Add the below code in ascx file.

<style type="text/css">
.MessageBoxPopUp
{
    background-color:White;
    border:solid 2px #99B4D1;
}
.MessageBoxButton
{
    background-color: #A0A0A0;
border: solid 2px #B4B4B4;
color: Black;
font-weight:bold;
font-family:Verdana;
font-size:9pt;
cursor:pointer;
height: 20px; 
width:70px;
display:none;
}
.MessageBoxHeader
{
 height:17px;
 font-size:10pt;
 color:White; 
 font-weight:bold;
 font-family:Verdana; 
 text-align:Left;
 vertical-align:middle;
 padding:3px 3px 3px 3px;
 background-color:#3399FF;
 border-bottom:2px solid #B4B4B4;
}
.MessageBoxData
{
 height:20px;
 font-size:8pt;
 font-family:Verdana;
 color:#3A4349; 
 text-align:Left;
 vertical-align:top;
}
</style>
<script type="text/javascript">
    function closeModelPopup(btn) {
        // var mpe = document.getElementById("<%= mpeMessageBox.ClientID %>");
        $find('mpeFirmMessageBox').hide();
    }
</script>
<asp:Button ID="btnTemp" runat="server" Style="display: none;" />
<cc1:ModalPopupExtender ID="mpeMessageBox" runat="server" DynamicServicePath="" Enabled="True"
    TargetControlID="btnTemp" PopupControlID="pnlMessageBox" BackgroundCssClass="modal"
    PopupDragHandleControlID="pnlMessageBox" CancelControlID="btnCancel" BehaviorID="mpeFirmMessageBox">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlMessageBox" runat="server" Style="display: none; width: 300px;
    height: 140px;" class="MessageBoxPopUp">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr class="MessageBoxHeader" style="height: 17px;">
            <td colspan="2">
                <asp:Label ID="lblHeader" runat="server"></asp:Label>
            </td>
            <td align="right" style="padding: 2px 2px 0px 0px;">
                <%--<asp:UpdatePanel ID="upnCloseMessageBox" runat="server">
                    <ContentTemplate>--%>
                        <asp:ImageButton ID="imgBtnClose" runat="server" ImageUrl="~/Image/close_icon.png"
                             OnClientClick="closeModelPopup(this)" />
                    <%--</ContentTemplate>
                </asp:UpdatePanel>--%>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="height: 5px;">
            </td>
        </tr>
        <tr style="height: 88px;">
            <td style="vertical-align: top; padding-left: 5px;">
                <asp:Image ID="imgInfo" runat="server" ImageUrl="~/Image/information-balloon.png" Width="40px" />
            </td>
            <td class="MessageBoxData" colspan="2" style=" padding: 10px 5px 5px 5px;">
                <asp:Label ID="lblMessage" runat="server"></asp:Label>
            </td>
        </tr>
        <tr style="vertical-align: bottom; height: 20px; padding: 0px 5px 5px 0px;">
            <td style="width: 40px;">
            </td>
            <td align="right" style="width: 180px">
                <asp:Button ID="btnOk" runat="server" CssClass="MessageBoxButton" />
            </td>
            <td align="right">
                <asp:Button ID="btnCancel" runat="server" CssClass="MessageBoxButton" />
            </td>
        </tr>
    </table>
</asp:Panel>

And add the below code in .cs file

public delegate void delegate_OkClick();
public event delegate_OkClick OnOkClick;
public string Header
{
    set { lblHeader.Text = value; }
    //set { lblHeader.InnerHtml = value; }
}
public string Message
{
    set { lblMessage.Text = value; }
}
public Button CancelButton
{
    get { return btnCancel; }
}
public Button OkButton
{
    get { return btnOk; }
}
public AjaxControlToolkit.ModalPopupExtender MessageBox
{
    get { return mpeMessageBox; }
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnOk_OnClick(object sender, EventArgs e)
{
    //raise the event if not null
    if (OnOkClick != null)
    OnOkClick();
}
public void displayMessage(string message)
{
    displayMessage(message, null);
}
public void displayMessage(string message, int? type)
{ 
    lblHeader.Text = "Alert Message";
    //lblHeader.InnerHtml = title;
    lblMessage.Text = message;
    btnCancel.Attributes["style"] = "display:block";
    btnCancel.Text = "Ok";
    mpeMessageBox.Show();
}

Now your message box is ready,

Now you need to call from the aspx page where ever you need to show the message.

For that, add the below line of code in

<%@ Register Src="~/Control/Alert.ascx" TagName="MessageBox" TagPrefix="mb" %>
<asp:ScriptManager runat="server" ID="s"></asp:ScriptManager>
<mb:MessageBox ID="ucMessageBox" runat="server"></mb:MessageBox>

And from the code behind cal the display message.

protected void btnClick_OnClik(object sender, EventArgs e)
{
    ucMessageBox.displayMessage("Alert from Code");
}

Output