Click here to Skip to main content
14,332,394 members

An information box control to display messages using AJAX

Rate this:
2.43 (8 votes)
Please Sign up or sign in to vote.
2.43 (8 votes)
19 Dec 2007GPL3
An alternative to message boxes, implementing ASP.NET AJAX Extensions 1.0.

InfoBox control in run mode

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" />
<!--<span class="code-comment"> InfoBox --></span>
<mbui:InfoBox ID="InfoBox" runat="server"

    Text="Hello World"

    Width="400px"

    CssClass="cssInfoBox"

    TextCssClass="cssInfoBoxText">
</mbui:InfoBox>
<!--<span class="code-comment"> InfoBox --></span><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">
<!--<span class="code-comment">
table.cssInfoBox{
border:solid 1px SteelBlue;
background-color:LemonChiffon;
padding:5px;
}
span.cssInfoBoxText{
color:DarkRed;
}
//--></span>
</style>

Your InfoBox control should now look like:

InfoBox control in design mode

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.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author

jlchereau
Other Memba
United Kingdom United Kingdom

Other Articles:



My work at Memba


You can check what Memba does at our corporate web site.

I am currently working on two projects:
- VELODOC, a file transfer online service and software product which you can try at http://www.velodoc.net;
- CITADOC, a knowledge base/wiki online service and software product which can be managed and edited in Microsoft Office and which will be released in the second half of 2008.

The XP edition of these projects is the open source core released under the GPL license.

Comments and Discussions

 
GeneralAdding Event Handler and CssClass To Elements Using ScriptManager Pin
elizas22-Apr-10 3:00
groupelizas22-Apr-10 3:00 
GeneralNot bad Pin
RoboTots2-Apr-09 8:06
memberRoboTots2-Apr-09 8:06 
Generalsource code Pin
BahadirEkici1-Aug-08 0:27
memberBahadirEkici1-Aug-08 0:27 
GeneralRe: source code Pin
jlchereau3-Dec-08 10:21
memberjlchereau3-Dec-08 10:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 18 Dec 2007

Stats

51.2K views
257 downloads
49 bookmarked