An information box control to display messages using AJAX
An alternative to message boxes, implementing ASP.NET AJAX Extensions 1.0.
Introduction
Our objective is to provide an AJAX equivalent to WinForms MessageBox and JavaScript alerts, which is adapted to both the HTTP submit pattern and the display of messages of AJAX callbacks. The function is fulfilled by an information box ASP.NET server control which displays messages within the page. Our environment is ASP.NET 2.0 on Windows and IIS, and our information box uses ASP.NET AJAX Extensions 1.0, which you can download and install from here.
Background
This article refers to the open-source controls of “Memba Velodoc XP Edition”, which you can download from here (this page provides links to Codeplex, Google code, and Sourceforge.NET) and which are distributed under the GPL license. These controls include an information box which we use in this article. You can experiment these controls live at this link.
Using the code
In Visual Studio 2005, create a new ASP.NET AJAX-Enabled Web Site, and add a reference to Memba.WebControls.XP.dll which contains the InfoBox
server control. Memba.WebControls.XP.dll is part of the Memba Velodoc XP Edition. The source code is available at the download location cited above.
Open the Default.aspx page, and add the InfoBox
server control, either by dragging and dropping the control after adding it to the toolbox, or simply by adding the following code between the existing <form>
tags:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<!-- InfoBox -->
<mbui:InfoBox ID="InfoBox" runat="server"
Text="Hello World"
Width="400px"
CssClass="cssInfoBox"
TextCssClass="cssInfoBoxText">
</mbui:InfoBox>
<!-- InfoBox --><br /><br />
<select id="cboType">
<option>Error</option>
<option selected="selected">Information</option>
<option>Ok</option>
<option>Warning</option>
</select>
<input id="txtMessage" type="text" value="Test message" />
<input id="btnAll" type="button" value="set all" />
<input id="btnTemp" type="button" value="set temp" />
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="submit" />
</form>
You may have to register the control at the top of the page, using the following statement:
<%@ Register Assembly="Memba.WebControls.XP"
Namespace="Memba.WebControls" TagPrefix="mbui" %>
Also, add an HTML drop-down list (cboType
), an HTML text box (txtMessage
), two HTML buttons (btnAll
and btnTemp
), and an ASP.NET submit button (btnSubmit
).
The InfoBox
control is a table with one row and two cells, where the first cell contains the image and the second cell embeds a span
for the text. Note that the text
property of the InfoBox
control can use localized resources, and the control can be skinned using ASP.NET themes. Add the following styles just above the </head>
closing tag of your page:
<style type="text/css">
<!--
table.cssInfoBox{
border:solid 1px SteelBlue;
background-color:LemonChiffon;
padding:5px;
}
span.cssInfoBoxText{
color:DarkRed;
}
//-->
</style>
Your InfoBox
control should now look like:
Obviously, you can set the icon and text using server-side code. Double click the ASP.NET Submit button, and implement the Click
event handler as follows:
protected void btnSubmit_Click(object sender, EventArgs e)
{
InfoBox.Type = Memba.WebControls.InfoBoxType.OK;
InfoBox.Text = "Submission complete";
}
Click F5 to run the page, and click the Submit button. The response should display “Submission complete” with a green icon.
More interestingly, the icon and text can also be changed client-side using JavaScript code. Add the following script just before the </body>
closing tag of your page:
<script type="text/javascript">
<!--
// Declare global variables for the various controls
var g_InfoBox;
var g_cboType;
var g_txtMessage;
var g_btnAll;
var g_btnTemp;
//pageLoad function of ASP.NET Ajax Extensions framework
function pageLoad()
{
//get a reference to the InfoBox control
g_InfoBox = $find("<%= InfoBox.ClientID %>");
//Get references to html controls
g_cboType = $get("cboType");
g_txtMessage = $get("txtMessage");
g_btnAll = $get("btnAll");
g_btnTemp = $get("btnTemp");
//Add event handlers for the click event of both html buttons
if(g_btnAll)
$addHandler(g_btnAll, "click", onBtnAll);
if(g_btnTemp)
$addHandler(g_btnTemp, "click", onBtnTemp);
}
//pageUnload function of ASP.NET Ajax Extensions framework
function pageUnload()
{
//Clear event handlers
if(g_btnAll)
$clearHandlers(g_btnAll);
if(g_btnTemp)
$clearHandlers(g_btnTemp);
}
//click event handler for the btnAll button
function onBtnAll()
{
//Set the infobox message permanently
if(g_InfoBox && g_cboType && g_txtMessage)
{
var _t = g_cboType.options[g_cboType.selectedIndex].text;
g_InfoBox.set_text(g_txtMessage.value);
g_InfoBox.set_type(getType(_t));
//The following does the same in one line
//g_InfoBox.setAll(getType(_t), g_txtMessage.value);
}
}
//click event handler for the btnTemp button
function onBtnTemp()
{
//Set the infobox message for 500 millisec
if(g_InfoBox && g_cboType && g_txtMessage)
{
var _t = g_cboType.options[g_cboType.selectedIndex].text;
g_InfoBox.setTemp(getType(_t), g_txtMessage.value, 500);
}
}
//helper
function getType(value)
{
switch(value)
{
case "Error":
return Memba.WebControls.InfoBoxType.Error;
case "Ok":
return Memba.WebControls.InfoBoxType.OK;
case "Warning":
return Memba.WebControls.InfoBoxType.Warning;
default:
return Memba.WebControls.InfoBoxType.Information;
}
}
//-->
</script>
ASP.NET AJAX extensions provide two important JavaScript event handlers:
pageLoad
is called by the framework when the page DOM and scripts are loaded and initialized. This is a good place to get references to controls and add event handlers.pageUnload
is called by the framework when the page unloads. It is recommended to clear handlers at this stage.
The script implements event handlers for the Click
event of the two HTML buttons (btnAll
and btnTemp
). In both cases, the Click
event handler assigns to the InfoBox
the values of the icon selected in the drop-down list and the message text entered in the text box.
Press F5 to run the project, and click the various buttons to experiment with the InfoBox
..
Points of interest
This information box is a very simple, yet useful, server control based on the ASP.NET AJAX Extensions. It demonstrates the creation and use of ASP.NET server controls. For more advanced developers, the source code of the information box is available at Codeplex, Google code, and Sourceforge.NET, and is commented in great details.
History
- Version 1.0 - dated 18 Dec 2007.