|
|||||||||||||||||||||
|
|||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
IntroductionIn 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 codeTo 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
To pop up a Message Box , you only need to call 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
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. <%@ 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 ControlThe 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 Codeusing 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;
| ||||||||||||||||||||
