Introduction

In web-based applications, Message Box, Confirmation Box etc are used very often to alert user or to ask user's confirmation for some important operation. In web forms, these popup boxes are usually implemented using JavaScript that runs on client side, for example, using alert, confirm etc functions. A disadvantage of this solution is that the popup time of those prompt boxes is statically specified on client side at design time, so they can't be flexibly used on server side like a server side component, which is very inconvenient, especially for complicated commercial applications that have very complex business logic but need to provide friendly user interface.

In Lee Gunn's article "Simple Message Box functionality in ASP.NET", he only solved the Message Box problem, but didn't mention Confirmation Box issue. In this article, we will introduce a simple but very practical server control that can perform the functionality of either Message Box or Confirmation Box. What's more, the configuration and use of this server control is also very easy.

Using the code

To use the server control in the code, first you need to add the server control as a .NET Framework Components to your web application. Detailed steps are: Right click the "components" tab in the toolbox, click "Add/Remove Items", there's a window pop up, in the .NET Framework components tab, click "Brower", and select and add the server control executable from where you kept in your computer. The file name is msgBox.dll. Then, drag and drop the server control to your web form. (Please note here: please put the server control at the last position of the web form, else there will be some unexpected result).

The following is WebForm1.aspx code with the server control inside.

<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" 
  AutoEventWireup="false" Inherits="msgbox_app.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" 
  name="vs_targetSchema">

</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" runat="server" Text="Submit"></asp:Button>
<asp:TextBox id="TextBox1" runat="server" Width="232px" Height="32px">
</asp:TextBox>
<cc1:msgBox id="MsgBox1" runat="server"></cc1:msgBox>
</form>
</body>
</HTML>

Suppose such a simple scenario: when you click Button1, you will pop up a Message Box if no text input in TextBox1, but if there's input in TextBox1, you will pop up a confirmation box to ask user if he wants to continue. Corresponding Button-Click event handling code is listed as below.

To pop up a Message Box , you only need to call alert(string msg) method of the server control. It is very easy so don't explain here. We will mainly introduce how to pop up a confirmation box here. The second parameter of method confirm(string msg, string hiddenfield_name) is the name of a hidden field element of the web form which the server control also belongs to. You don't need to explicitly create the hidden field component, the server control will create one for you using the hidden field name you provide, but you need to provide a unique hidden field name that differentiate itself from the other components in the web form. The original value of the hidden field is "0". When the user click "ok" to confirm the operation, the server control will change the value of the previously specified hidden field value from "0" to "1".

private void Button1_Click(object sender, System.EventArgs e)
{
  //for the page with only one form
  if(TextBox1.Text!=null && TextBox1.Text!="")
     MsgBox1.alert("Please input something in the text box.");
  else
     MsgBox1.confirm("Hello "+ TextBox1.Text + 
          "! do you want to continue?", "hid_f");
}

If the user answers the confirmation box by clicking either "OK" or "CANCEL" button, the web page will be posted back, so you need to write corresponding code to capture and process that. That piece of code is usually put in the Page_Load() method of the code behind of the ASPX page. By checking if the value of the hidden field element of the form is changed to "1", which means the user confirms, you can put corresponding processing code as below. Please don't forget to reset the hidden field value back to original value "0", otherwise something will be wrong the next time to invoke the confirm box.

private void Page_Load(object sender, System.EventArgs e)
{

   if(IsPostBack)
   {
    //PLEASE COPY THE FOLLOWING CODE TO YOUR Page_Load() 
    //WHEN USING THE SERVER CONTROL in your page
    if(Request.Form["hid_f"]=="1")   //if user clicks "OK" to confirm 
    {
        Request.Form["hid_f"].Replace("1","0");
          //Reset the hidden field back to original value "0"

        //Put the continuing processing code 
        MsgBox1.alert("hello " + TextBox1.Text); 

    } 
    //END OF CODE TO BE COPIED
   }
}

That's it. Very easy and simple, isn't it? All above C# code is within WebForm1.aspx.cs, the code behind of WebForm1.aspx.

The other thing we need to mention is that in above scenario, we assume that WebForm1.aspx only includes ONE web form. Actually, in ASP.NET, each ASPX page only supports one web form server control, so for most cases, above solution is enough. However, there're also very few cases such that in some ASPX page, there's one web form server control and also other traditional HTML form, i.e., the page includes more than one web forms. Using the msgBox server control can also easily solve this issue. What you need to do is to put the msgBox as an element of the server control web form and this web form should be the first form in the web page. The rest process remains the same. The WebForm2.aspx in the demo project shows this case.
The normal HTML form element is not a server control so it can't post back to the code behind of the ASPX page, so you need to write the processing code somewhere else, in the following sample, those processing code is shown in the same WebForm2.aspx page.

<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" 
  AutoEventWireup="false" Inherits="msgbox_app.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<% 
if(Request.Form["btn"]!=null)
{

//for the page with more than one forms
if(Request.Form["text1"]=="")
{
//Response.Write("Hi");
  MsgBox1.alert(
"Button2 clicked. Please input something in the second text box.");
}
else
{
MsgBox1.confirm("Button2 clicked. Hello "+ 
  Request.Form["text1"].ToString() + "! do you want to continue?", "hid_f2");
}
}

if(Request.Form["hid_f2"]=="1") //if button2 is clicked and user confirmed
{
 //Your processing code here
 MsgBox1.alert("Button2 Clicked and user confirmed. Hello " 
  + Request.Form["text1"]);
 Request.Form["hid_f2"].Replace("1","0");
} 
%>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta 
content=http://schemas.microsoft.com/intellisense/ie5 
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<DIV style="LEFT: 56px; WIDTH: 512px; 
POSITION: absolute; TOP: 136px; HEIGHT: 128px"
ms_positioning="FlowLayout">
<FORM id="Form1" method="post" runat="server">
<asp:button id="Button1" runat="server" Text="Button1">
</asp:button><asp:textbox id="TextBox1" runat="server" 
Width="232px" Height="40px">
</asp:textbox><cc1:msgbox id="MsgBox1" runat="server"></cc1:msgbox></FORM>
<FORM id="Form2" method="post">
<INPUT id="btn" type="submit" value="Button2" name="btn" runat="server"> 
<INPUT id="text1" style="WIDTH: 224px; 
HEIGHT: 31px" type="text" size="32" name="text1"
runat="server">
</FORM>
</DIV>
</body>
</HTML>

About msgBox Server Control

The basic mechanism of msgBox server control is actually very simple, and may need better improvement later, but the convenience it brings is also tremendous. The key thing inside the server control is that it outputs the corresponding JavaScript code to HTML during the server control rendering phase, and it utilize JavaScript to change the value of the hidden field that it creates so that the hidden field can work as a tag representing the user's behavior (user's answer to the confirmation box). Please note, the hidden field control is a pure HTML element, NOT a server control. Only in this way, it can be accessed in JavaScript code, and its value will also be posted to server when the form is posted. The following is the source code for msgBox server control, it's pretty easy for you to understand if you know a little of ASP.NET server control life cycle.

Source Code

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Text;

namespace BunnyBear
{
/// <summary>
/// Summary description for WebCustomControl1.
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:msgBox runat=server></{0}:msgBox>")]
public class msgBox : System.Web.UI.WebControls.WebControl
{
//private string msg;
private string content;

[Bindable(true),
Category("Appearance"),
DefaultValue("")]

public void alert(string msg)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<script language='javascript'>" );

sb.Append( @"alert( """ + sMsg + @""" );" );

sb.Append( @"</script>" ); 

content=sb.ToString();
}

//confirmation box
public void confirm(string msg,string hiddenfield_name)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<INPUT type=hidden value='0' name='" + 
  hiddenfield_name + "'>");

sb.Append( @"<script language='javascript'>" );

sb.Append( @" if(confirm( """ + sMsg + @""" ))" );
sb.Append( @" { ");
sb.Append( "document.forms[0]." + hiddenfield_name + ".value='1';" 
  + "document.forms[0].submit(); }" );
sb.Append( @" else { ");
sb.Append("document.forms[0]." + hiddenfield_name + ".value='0'; }" );

sb.Append( @"</script>" );

content=sb.ToString();
}

/// <summary>
/// Render this control to the output parameter specified.
/// </summary>
/// <param name="output"> The HTML writer to write out to </param>
protected override void Render(HtmlTextWriter output)
{
  output.Write(this.content);
}
}
}

A Simple ASP.NET Server Control: Message Box & Confirmation Box