Have you ever gone to a site, filled out some information, and then received annoying alert messages. This often happens, and leads to discouraged internet browsers. In this article, we will create our custom alert message without using any JavaScript alerts. We will take a simple div, and bring it to the front with our desired message using some simple .net code.
What is the DivAlert web user control?
This is a web control written in Visual Studio 2005 using C#. It will allows users to have a quick way to display messages to the user, without the annoying JavaScript alerts.
Using the control
Using the control is simple. Just drag the control to the page your wish to create the div alert. Next on your code, when ever you want an alert, simply call the control in the following manner:
C#
Button1.OnClientClick = "return ShowAlertWithMessage(" +
"'" + this.AlertCtrl1.GetAlertDivControlID() + "'," +
"'" + this.AlertCtrl1.GetAlertLabelControlID() + "'," +
"'This is sample message 1.');";
VB.NET
Button1.OnClientClick = "return ShowAlertWithMessage(" + "'" + Me.AlertCtrl1.GetAlertDivControlID() + "'," + "'" +
Me.AlertCtrl1.GetAlertLabelControlID() + "'," + "'This is sample message 1.');"
What does this do? It calls a javascript method(ShowAlertWithMessage) with two predefined methods which automatically gets the relevant client id’s and generates the message. The part you only need to concerned with the last parameter which is your message. The method above will display the error message when the button is clicked.
In a real application, you would first check fields, and then call the ShowAlertWithMessage() if there was an error. It may be something like the following:
Button1.OnClientClick = "if (ValidateInput() == false) { return ShowAlertWithMessage(" +
"'" + this.AlertCtrl1.GetAlertDivControlID() + "'," +
"'" + this.AlertCtrl1.GetAlertLabelControlID() + "'," +
"'This is sample message 1.'); }";
The ValidateInput() checks if the input was valid. If it was not valid, it will show the alert message, and the server side event for the button will not be executed.
HTML of the sample page in this tutorial
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="Controls/AlertCtrl.ascx" TagName="AlertCtrl" TagPrefix="uc1" %>
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>Sample Testing Pagetitle>
head>
<body>
<form id="form1" runat="server">
<div><asp:Button ID="Button1" runat="server" Font-Names="Tahoma" Font-Size="8pt"
Text="Display Message 1" /><br />
<asp:Button ID="Button2" runat="server" Font-Names="Tahoma" Font-Size="8pt"
Text="Display Message 2" /><br />
<asp:Button ID="Button3" runat="server" Font-Names="Tahoma" Font-Size="8pt"
Text="Display Message 3" /><br />
Display custom message
<asp:TextBox ID="TBData" runat="server">asp:TextBox>
<asp:Button ID="BtnSubmitData" runat="server" Font-Names="Tahoma" Font-Size="8pt"
Text="Submit" />
<uc1:AlertCtrl ID="AlertCtrl1" runat="server" />
div>
form>
body>
html>
Code Behind of sample page in this tutorial
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//What we need to do is generate a call to our javascript as the following:
//return ShowAlertWithMessage(DivControlID, LabelControlID, MessageToDisplay)
//which is our javascript method which always returns false
Button1.OnClientClick = "return ShowAlertWithMessage(" +
"'" + this.AlertCtrl1.GetAlertDivControlID() + "'," +
"'" + this.AlertCtrl1.GetAlertLabelControlID() + "'," +
"'This is sample message 1.');";
Button2.OnClientClick = "return ShowAlertWithMessage(" +
"'" + this.AlertCtrl1.GetAlertDivControlID() + "'," +
"'" + this.AlertCtrl1.GetAlertLabelControlID() + "'," +
"'This is sample message 2.');";
Button3.OnClientClick = "return ShowAlertWithMessage(" +
"'" + this.AlertCtrl1.GetAlertDivControlID() + "'," +
"'" + this.AlertCtrl1.GetAlertLabelControlID() + "'," +
"'This is sample message 3.');";
BtnSubmitData.OnClientClick = "return ShowAlertWithMessage(" +
"'" + this.AlertCtrl1.GetAlertDivControlID() + "'," +
"'" + this.AlertCtrl1.GetAlertLabelControlID() + "'," +
"document.getElementById('" + this.TBData.ClientID + "').value);";
}
}
}
DIVALERT Control Source Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Controls_AlertCtrl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BtnOK.OnClientClick = "return HideAlert('" + this.DivAlert.ClientID + "');";
//what we have done is to create the line to call the javascript function
//return HideAlert(DidID);
//which will always return false;
}
}
public string GetMessage()
{
//return our current message
return LblMsg.Text;
}
public string GetAlertDivControlID()
{
//return the id of the div message box
return DivAlert.ClientID;
}
public string GetAlertLabelControlID()
{
//return the label id of our message box label
return LblMsg.ClientID;
}
public void ClearMessage()
{
//clear our message box
LblMsg.Text = "";
}
}
DIVALERT Control HTML And JavaScript
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AlertCtrl.ascx.cs" Inherits="Controls_AlertCtrl" %>
<script language="javascript">
//Displays alert div box
function ShowAlert(DivID)
{
try
{
//Get object
var obj = document.getElementById(DivID);
if ( obj != null )
{
//display div object
obj.style.display = "block";
}
//return false so no post back occurs
return false;
}
catch(e)
{
alert(e);
//return false so no post back occurs
return false;
}
}
function ShowAlertWithMessage(DivID, LabelId, Message)
{
try
{
//Get object
var obj = document.getElementById(DivID);
var Msgobj = document.getElementById(LabelId);
if ( obj != null && Msgobj != null)
{
//display div object
obj.style.display = "block";
Msgobj.innerHTML = Message;
}
//return false so no post back occurs
return false;
}
catch(e)
{
alert(e);
//return false so no post back occurs
return false;
}
}
function HideAlert(DivID)
{
try
{
//Get object
var obj = document.getElementById(DivID);
if ( obj != null )
{
//hide div object
obj.style.display = "none";
}
//return false so no post back occurs
return false;
}
catch(e)
{
alert(e);
//return false so no post back occurs
return false;
}
}
script>
<div id="DivAlert" align="center" valign="middle" runat="server" style="border-right: blue solid; border-top: blue solid; left: 35%; border-left: blue solid; width: 300px; border-bottom: blue solid; position: absolute; top: 25%; height: 200px; display: none; visibility: visible; clear: both; font-size: 8pt; float: none; vertical-align: middle; font-family: TAHOMA; background-color: beige; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
<tr>
<td style="height: 20%" align="center" valign="middle">
<strong> Your Custom Pop Up Message Title<br />
strong>td>
tr>
<tr>
<td style="height: 60%; border-top: blue solid;" align="center" valign="middle">
<br />
<asp:Label ID="LblMsg" runat="server" EnableViewState="False">asp:Label>td>
tr>
<tr>
<td style="height: 20%" align="center">
<asp:Button ID="BtnOK" runat="server" BackColor="White" BorderColor="Blue" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Tahoma" Font-Size="8pt" ForeColor="Blue" Text="OK" Width="30px" /><br />
td>
tr>
table>
div>
Good luck.
Was this article helpful? Don't forget to rate it. Ratings helps community members identify top & useful articles.