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
- First create a Web Form Website/Application
- Get Ajax Control Toolkit respective framework DLL [AjaxControlToolkit.dll] from CodePlex ..
- Add this
DLL to the Bin folder
- Add Reference in project and select
AjaxControlToolkit.dll from Bin folder
- 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"%>
- 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.
- Add
UpdatePanel and inside it add ModalPopup and Message Panel to Page..
See Below My ASPX page
<%@ 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;
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" />
<%----%>
<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>
<%----%>
</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.
- Write button click events to show messages on page.. See code behind file of page
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);
}
}
private void ShowPopupMessage(string message, PopupMessageType messageType)
{
switch (messageType)
{
case PopupMessageType.Error:
lblMessagePopupHeading.Text = "Error";
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();
}
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:
