Implementation of MessageBox in ASP. NET

Asp.net does not have the MessageBox control, although it can be inserted into the MessageBox in winform, but it is generally not advocate, so it can only be implemented with flexibility. There are mainly the following methods:

1. directly use the alert and confirm functions of javascript:
On the server side:
1) Alert
Scriptmanager. registerstartupscript (this, typeof (PAGE), guid. newguid (). tostring (), "alert ('Nothing changed. ')", true );

 

2) confirm
Associate The onclick event in the pop-up window with confirm:
Savebutton. Attributes. Add ("onclick", "Return confirm ('Are you sure you want to save it? ');");

 

2. Use modalpopupextender and confirmbutton in ajaxtoolkit:
1) modalpopupextender
In the aspx file:
<Ajaxtoolkit: modalpopupextender runat = "server" id = "msgbox" targetcontrolid = "hiddentargetcontrolformodalpopup"
Popupcontrolid = "messageboxpanel" backgroundcssclass = "messagebox_parent" dropshadow = "false"
Repositionmode = "repositiononwindowresizeandscroll"/>
<Asp: button runat = "server" id = "hiddentargetcontrolformodalpopup" style = "display: none;"/>
<Asp: Panel runat = "server" id = "messageboxpanel" style = "display: none; Background-color: White; Border: #003399 2px solid; width: 400px; height: 125px; "> <Div style =" text-align: Center "> are you sure you want to save it? </Div> <Div style = "text-align: Center"> <asp: button id = "okbutton" runat = "server" onclick = "okbutton_click"/> & nbsp; & nbsp; <asp: button id = "cancelbutton" runat = "server" onclick = "cancelbutton_click"/> </ASP: Panel>
In use, use the msgbox. Show () method on the server side to open it, and use the msgbox. Hide () method to close it.

 

2) confirmbutton
In aspx:
<% @ Register Assembly = "ajaxcontroltoolkit" namespace = "ajaxcontroltoolkit" tagprefix = "ajaxtoolkit" %>
<Ajaxtoolkit: confirmbuttonextender id = "confirmbox" runat = "server" confirmtext = "are your sure you want to save it? "Targetcontrolid =" savebutton "/>
Savebutton is the Save button. When you select the OK key in the pop-up window, execute the statement in its onclick event.

In essence, ajaxtoolkit uses Div to simulate the pop-up window.

 

3. Custom Controls:
In fact, div is used for simulation, but it is more complicated. The following is an example:
Ascx:
<% @ Control Language = "C #" autoeventwireup = "true" codebehind = "MessageBox. ascx. cs"
Inherits = "controls. MessageBox" %>
<% @ Register Assembly = "ajaxcontroltoolkit" namespace = "ajaxcontroltoolkit" tagprefix = "ajaxtoolkit" %>
<Style type = "text/CSS">
. Messagebox_parent
{
Color: blue;
-Moz-opacity: 0.12;
Background-color: #000;
Filter: alpha (opacity = 12 );
Opacity: 0.12;
}
. Messagebox_content
{
Outline-style: none;
Outline-style: invert;
Outline-width: 0px;
Border-bottom: #003399 2px solid;
Text-align: center;
Border: #003399 2px solid;
Background: white;
Cursor: auto;
Display: block;
Width: 400px;
Height: 150px;
}
. Messagebox_title
{
Background: URL (.../../images/vertgradient.gif) #003399 repeat-x 50% bottom;
Font-size: 12px;
Font-weight: bold;
Text-Decoration: none;
Padding: 4px;
Border-top: 0;
Border-Right: 0;
Color: white;
Vertical-align: baseline;
Text-align: left;
Cursor: pointer;
}
</Style>
<Ajaxtoolkit: modalpopupextender runat = "server" id = "msgbox" targetcontrolid = "hiddentargetcontrolformodalpopup"
Popupcontrolid = "messageboxpanel" backgroundcssclass = "messagebox_parent" dropshadow = "false"
Repositionmode = "repositiononwindowresizeandscroll">
</Ajaxtoolkit: modalpopupextender>
<Asp: button runat = "server" id = "hiddentargetcontrolformodalpopup" style = "display: none;"/>
<Asp: Panel runat = "server" id = "messageboxpanel" cssclass = "messagebox_content" style = "display: none;">
<Asp: Panel runat = "server" id = "messageboxtitlehandle" cssclass = "messagebox_title">
<Div id = "messageboxcaption" runat = "server">
</Div>
</ASP: Panel>
<Div style = "float: Left; margin-left: 10px; margin-top: 10px;">
<Asp: Image id = "messageboxicon" runat = "server" imageurl = "../images/exclamation.gif" style = "width: 64px; Height: 64px;"/>
</Div>
<Div style = "display: Table; Height: 80px; position: relative; overflow: hidden; text-align: Left; padding-left: 10px; padding-Right: 10px; ">
<Div style = "display: Table-cell; Vertical-align: middle; position: absolute; top: 50%;">
<Div id = "messageboxtext" runat = "server" style = "position: relative; top:-50%;">
</Div>
</Div>
</Div>
<Div>
<Asp: button runat = "server" id = "button1" text = "button1" style = "width: 70px; margin: 5px;" onclick = "button_click"/>
<Asp: button runat = "server" id = "button2" text = "button2" style = "width: 70px; margin: 5px;" onclick = "button_click"/>
<Asp: button runat = "server" id = "button3" text = "button3" style = "width: 70px; margin: 5px;" onclick = "button_click"/>
</Div>
</ASP: Panel>
 
Ascx. CS:
Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Threading;
Namespace controls
{
Public partial class MessageBox: system. Web. UI. usercontrol
{
Public event eventhandler <messageboxargs> messageboxbuttonclick;
Protected void page_load (Object sender, eventargs E)
{
}
Private void setbutton (Button button, dialogresult)
{
Button. Text = dialogresult. tostring ();
Button. attributes ["dialogresult"] = (byte) dialogresult). tostring ();
If (dialogresult = dialogresult. None)
{
Button. Style ["display"] = "NONE ";
}
Else
{
Button. Style ["display"] = "inline ";
}
}
Public void show (string text, string caption, messageboxbuttons buttons, messageboxicon icon)
{
Switch (buttons)
{
Case messageboxbuttons. abortretryignore:
Setbutton (button1, dialogresult. Abort );
Setbutton (button2, dialogresult. Retry );
Setbutton (button3, dialogresult. Ignore );
Break;
Case messageboxbuttons. OK:
Setbutton (button1, dialogresult. OK );
Setbutton (button2, dialogresult. None );
Setbutton (button3, dialogresult. None );
Break;
Case messageboxbuttons. okcancel:
Setbutton (button1, dialogresult. OK );
Setbutton (button2, dialogresult. Cancel );
Setbutton (button3, dialogresult. None );
Break;
Case messageboxbuttons. retrycancel:
Setbutton (button1, dialogresult. Retry );
Setbutton (button2, dialogresult. Cancel );
Setbutton (button3, dialogresult. None );
Break;
Case messageboxbuttons. yesno:
Setbutton (button1, dialogresult. Yes );
Setbutton (button2, dialogresult. No );
Setbutton (button3, dialogresult. None );
Break;
Case messageboxbuttons. yesnocancel:
Setbutton (button1, dialogresult. Yes );
Setbutton (button2, dialogresult. No );
Setbutton (button3, dialogresult. Cancel );
Break;
}
Switch (icon)
{
Case messageboxicon. Error:
Messageboxicon. imageurl = "../images/error.gif ";
Break;
Case messageboxicon. Information:
Messageboxicon. imageurl = "~ /Images/info.gif ";
Break;
Case messageboxicon. Exclamation:
Messageboxicon. imageurl = "../images/exclamation.gif ";
Break;
}
Messageboxcaption. innertext = Caption;
Messageboxtext. innertext = text;
Msgbox. Show ();
}
Public void show (string text, string caption, messageboxbuttons buttons, messageboxicon icon, string refno)
{
Messageboxpanel. attributes ["refno"] = refno;
Show (text, caption, buttons, icon );
}
Public void hide ()
{
Msgbox. Hide ();
}
Protected void button_click (Object sender, eventargs E)
{
If (messageboxbuttonclick! = NULL)
{
Button button = sender as button;
If (button! = NULL)
{
Dialogresult = (dialogresult) (convert. tobyte (button. attributes ["dialogresult"]);
String refno = messageboxpanel. attributes ["refno"];
Messageboxargs ARGs = new messageboxargs (dialogresult, refno );
Messageboxbuttonclick (this, argS );
}
}
}
}
Public class messageboxargs: eventargs
{
Private dialogresult _ dialogresult;
Private string _ refno = string. empty;
Public dialogresult
{
Get {return _ dialogresult ;}
}
Public String refno
{
Get {return _ refno ;}
}
Public messageboxargs (dialogresult)
{
_ Dialogresult = dialogresult;
}
Public messageboxargs (dialogresult, string refno)
{
_ Dialogresult = dialogresult;
_ Refno = refno;
}
}
[Flags]
Public Enum messageboxbuttons
{
OK,
Okcancel,
Abortretryignore,
Yesnocancel,
Yesno,
Retrycancel
}
[Flags]
Public Enum messageboxicon
{
None,
Hand,
Question,
Exclamation,
Asterisk,
Stop,
Error,
Warning,
Information
}
[Flags]
Public Enum dialogresult
{
None,
OK,
Cancel,
Abort,
Retry,
Ignore,
Yes,
No
}
}
In the aspx file:
<% @ Register src = "MessageBox. ascx" tagname = "MessageBox" tagprefix = "uc1" %>
<Asp: updatepanel id = "updatepanel5" runat = "server">
<Contenttemplate>
<Uc1: MessageBox id = "confirmmsgbox" runat = "server"/>
</Contenttemplate>
</ASP: updatepanel>
In the Aspx. CS file:
Protected void page_load (Object sender, eventargs E)
{
Confirmmsgbox. messageboxbuttonclick + = onokclicked;
Confirmmsgbox. messageboxbuttonclick + = oncancelclicked;
}
// Open the MessageBox code:
Confirmmsgbox. Show ("are you sure you want to save it? "," Confirm ", messageboxbuttons. okcancel, messageboxicon. information );
// Code for handling button events:
Private void onokclicked (Object sender, messageboxargs Arg)
{
If (Arg. refno = "save" & are. dialogresult = dialogresult. OK)
{
// Other code
}
}
}
Private void oncancelclicked (Object sender, messageboxargs Arg)
{
If (Arg. refno = "save" & are. dialogresult = dialogresult. Cancel)
{
// Other code
}
}
}
The refno attribute is used to implement MessageBox sharing and distinguish different call objects.

This method provides better display and convenient sharing. this is its advantage. the disadvantage is that when used on a modalpopupextender, while disabling MessageBox, the next modalpopupextender will also be closed. if the modalpopupextender behind a button in MessageBox needs to be displayed after it is clicked, And the modalpopupextender behind it is closed after the other button is clicked, you can add the following in the onclientclick event of the previous button: return hidemessagebox ('confirmmsgbox ');
The code of the hidemessagebox function is as follows:
Function hidemessagebox (controlname ){
VaR IDs = Document. getelementsbytagname ('input ');
For (VAR I = 0; I <IDs. length; I ++ ){
If (IDs [I]. Id. Match (controlname )! = NULL ){
IDS [I]. style. Display = 'none ';
}
}
IDS = Document. getelementsbytagname ('div ');
For (VAR I = 0; I <IDs. length; I ++ ){
If (IDs [I]. Id. Match (controlname )! = NULL ){
IDS [I]. style. Display = 'none ';
}
}
IDS = Document. getelementsbytagname ('img ');
For (VAR I = 0; I <IDs. length; I ++ ){
If (IDs [I]. Id. Match (controlname )! = NULL ){
IDS [I]. style. Display = 'none ';
}
}
Return false;
}
However, if you want to maintain the modalpopupextender display after you click any button in MessageBox, this method will not work.

 

4. Simulate MessageBox with a modal window:
Client: (assuming the master page is used)
Function openmessagewindow (message, type ){
If (message! = NULL & message! = ''){
VaR messagetype = Document. getelementbyid ('<% = messagetype. clientid %> ');
Messagetype. value = type;
VaR dialogresult = Window. showmodaldialog ('messageboxwindow. aspx? Message = '+ message, 'Confirm', 'dialogwidth: pixel PX; dialogheight: 182px; center: Yes; Status: No; resizable: no ');
If (dialogresult = "yes "){
VaR yesbutton = Document. getelementbyid ('<% = yesbutton. clientid %> ');
Yesbutton. Click ();
}
Else if (dialogresult = "no "){
VaR nobutton = Document. getelementbyid ('<% = nobutton. clientid %> ');
Nobutton. Click ();
}
}
}
 
<Asp: button id = "yesbutton" runat = "server" style = "display: none"
Onclick = "yesbutton_click"/>
<Asp: button id = "nobutton" runat = "server"
Style = "display: none" onclick = "nobutton_click"/>
<Asp: hiddenfield id = "messagetype" runat = "server"/>

Server call code:
Scriptmanager. registerstartupscript (this. Page, typeof (PAGE), guid. newguid (). tostring (), "openmessagewindow ('Are you sure you want to save it? ', 'Save'); ", true );
Return;
}

Code for handling button events:
Protected void yesbutton_click (Object sender, eventargs E)
{
If (messagetype. value = "save ")
{
// Save the data
}
}
 
The content of the messageboxwindow. aspx file:
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "messageboxwindow. aspx. cs" inherits = "webform. messageboxwindow" %>
<! 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> confirm </title>
<Link href = "content/style.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT type = "text/JavaScript">
Function setreturnvalue (returnstring ){
Window. returnvalue = returnstring;
Window. Close ();
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div style = "text-align: center; margin-top: 60px">
<Div style = "margin-bottom: 30px">
<Asp: Label id = "messagelabel" runat = "server"/>
</Div>
<Div>
<Input type = "button" class = "button" onclick = "setreturnvalue ('yes')" value = "yes"/>
& Nbsp;
<Input type = "button" class = "button" onclick = "setreturnvalue ('no')" value = "no"/>
</Div>
</Div>
</Form>
</Body>
</Html>

The content of the messageboxwindow. aspx. CS file:
Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Namespace webform
{
Public partial class messageboxwindow: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
Messagelabel. Text = request. querystring ["message"];
}
}
}
Messagetype this hiddenfield is used to implement the simulation of MessageBox can be shared by multiple objects, and its value is used to distinguish the called object.

 

Summary:

The above method is the simplest, but restricted by JavaScript, the interface is poor in aesthetics. More importantly, MessageBox with more than two buttons cannot be implemented, and button events can only be processed on the client. the interface of method 2 is more beautiful and easy to use. the interface of method 3 is completely customized by the user. It has powerful functions, beautiful interfaces, and slightly more complicated calls. the main disadvantage of the two methods is that modalpopupextender is inconvenient to use. method 4 is restricted by the browser window, and the interface aesthetics is not as good as method 2 and 3, but better than method 1. overcome the shortcomings of method 2 and 3. the main disadvantage is that the performance is inferior to method 2 and 3.