Custom Alert Message using Ajax

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

Custom Alert Message using Ajax

Some time we required to create clone of 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 custom message box.

Add the user control file and ajaxtoolkit reference in 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;

bordersolid 2px #B4B4B4;

colorBlack;

font-weight:bold;

font-family:Verdana;

font-size:9pt;

cursor:pointer;

height20px

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 you message box is ready,

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

For that add 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