Introduction
Using JavaScript, you can access the dialog boxes while on page loading or after rendering the page content to the browser. There is no way to get a confirmation from the user while you process the functionality through JavaScript. To accomplish this, you have to go for a server side message box. Server side message box provides an option to get a confirmation from the user based on some functionality checking. After getting the confirmation from the user click, it processes the functionality based on user selection.
Message box displays a message in dialog box, waits for the user to click the button, and returns a value indicating which button the user clicked. Based on the user selection, the functionality to be performed can be executed.
While comparing with Windows applications, it’s a bit hard to implement this in web based solutions. At the same time, you can achieve this using JavaScript. JavaScript implementations having some limitations like inability to customize the buttons in a message box.
In this article, I am not explaining in much detail about my implementation. Here, I provide the code for implementation. Hope you understand the implementation with out any problems.
After implementing my DLL, you can get a message box like this:
Features of this box
- You can change the title text dynamically.
- You can change the title font dynamically.
- You can change the title font size dynamically.
- You can change the title font style dynamically.
- You can change the title font name dynamically.
- You can change the title back color dynamically.
- You can change the message text dynamically.
- You can change the message font dynamically.
- You can change the message font size dynamically.
- You can change the message font style dynamically.
- You can change the message font name dynamically.
- You can change the image dynamically.
- You can change the image border dynamically.
- You can change the image border color dynamically.
- You can change the message box back color dynamically.
- You can change the message box border color, size dynamically.
- You can dynamically change the desired buttons, Yes / No / Cancel / Ignore.
- You can also change the button forecolor, borders, style etc. dynamically.
When the message box is displayed, all the form controls are in the disabled state and vice versa. You can even drag the message box using a mouse.
DLL Implementation
Go to Solution Explorer, click Add References, and specify the path of the DLL file which has implementation of message box control class.
Follow these steps:
- At the top of your web form code behind, add the following line of code:
VB.NET
Imports NewMsgBoxAsp.Holool.Anwar.Web.Controls.UI
C#
Using NewMsgBoxAsp.Holool.Anwar.Web.Controls.UI;
- Create an instance of
MessageBox
class, to access its properties and methods:
VB.NET
Dim NBox As MessageBox = New MessageBox
C#
MessageBox NBox = New MessageBox();
- Drag an ASP
Button
on the web form and paste the following code:
VB.NET
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
NBox.SetEnabledAll(False, Me)
NBox.MB_Button = 3
NBox.MB_Top = 50
NBox.MB_Left = 150
NBox.MB_Width = 300
NBox.MB_Height = 150
NBox.MB_ButtonWidth = 60
NBox.MB_IDYes = "yesno"
NBox.MB_IDNo = "yesno"
NBox.MB_IDCancel = "yesno"
NBox.MB_ButtonYesText = "Yes"
NBox.MB_ButtonNoText = "No"
NBox.MB_ButtonCancelText = "Cancel"
NBox.MB_Title = "Uer Custom Title Here... .."
NBox.MB_Message = "Uer Custom Message Here... .."
NBox.MB_MessageFontSize = 10
NBox.MB_Image = "d.gif"
NBox.MB_TitleBarColor = System.Drawing.Color.Orange
NBox.MB_BoxColor = System.Drawing.Color.LightSeaGreen
NBox.MB_BoxShadowColor = System.Drawing.Color.LightSalmon
NBox.MB_TitleFontColor = System.Drawing.Color.Maroon
NBox.MB_TitleFontName = "Ariel"
NBox.MB_TitleFontBold = True
NBox.MB_ImageBorderSize = 5
NBox.MB_ImageBorderColor = System.Drawing.Color.Red
NBox.MB_ImageBorderStyle = BorderStyle.Double
NBox.MB_ButtonBackColor = System.Drawing.Color.Green
NBox.MB_ButtonBorderColor = System.Drawing.Color.Red
NBox.MB_ButtonBorderWidth = 4
NBox.MB_ButtonBorderStyle = BorderStyle.Double
NBox.MB_ButtonForeColor = System.Drawing.Color.Yellow
NBox.MB_ButtonFontBold = True
NBox.MB_BorderWidth = 5
NBox.MB_BorderStyle = BorderStyle.Double
NBox.MB_BorderColor = System.Drawing.Color.Honeydew
Panel1.Controls.Add(NBox)
End Sub
C#
private void Button1_Click(object sender, System.EventArgs e)
{
MessageBox myBox = new MessageBox();
myBox.MB_Button = 3;
myBox.MB_Width = 300;
myBox.MB_Height = 150;
myBox.MB_ButtonWidth = 60;
myBox.MB_IDYes = "yesno";
myBox.MB_IDNo = "yesno";
myBox.MB_IDCancel = "yesno";
myBox.MB_ButtonYesText = "Yes";
myBox.MB_ButtonNoText = "No";
myBox.MB_ButtonCancelText = "Cancel";
myBox.MB_Title = "Uer Custom Title Here... ..";
myBox.MB_Message = "Uer Custom Message Here... ..";
myBox.MB_MessageFontSize = 10;
myBox.MB_Image = "d.gif";
myBox.MB_TitleBarColor = System.Drawing.Color.Orange;
myBox.MB_BoxColor = System.Drawing.Color.LightSeaGreen;
myBox.MB_BoxShadowColor = System.Drawing.Color.Violet;
myBox.MB_TitleFontColor = System.Drawing.Color.Red;
myBox.MB_TitleFontName = "Ariel";
myBox.MB_ImageBorderSize = 5;
myBox.MB_ImageBorderColor = System.Drawing.Color.DarkGreen;
myBox.MB_ImageBorderStyle = BorderStyle.Double;
myBox.MB_ButtonBackColor = System.Drawing.Color.Green;
myBox.MB_ButtonBorderColor = System.Drawing.Color.Red;
myBox.MB_ButtonBorderWidth = 4;
myBox.MB_ButtonBorderStyle = BorderStyle.Double;
myBox.MB_ButtonForeColor = System.Drawing.Color.Yellow;
myBox.MB_BorderWidth = 5;
myBox.MB_BorderStyle = BorderStyle.Double;
myBox.MB_BorderColor = System.Drawing.Color.Honeydew;
Panel1.Controls.Add(myBox);
}
So, when you click the button, the message box is displayed. But wait, still there is something to be done. Normally, in a Windows message box, the user can drag the message to any location of the screen. This is not possible with a server control. To achieve this functionality, I have designed one more custom control called as WebControlDraggerS
.
This invisible control can be used to drag the message box to any part of the screen at run time, like any other classic Windows messagebox.
To use this control, right click on the toolbox, select add/new items, and specify the path of WebControlDraggerS DLL file. Once the control is on the toolbox, drag it on the form.
Next, paste the following methods, ControlToDrag
and Panel1_PreRender
to code behind:
Private Sub ControlToDrag(ByVal ctrl As Control)
Dim focusScript As String = " <SCRIPT language='javascript'>" & _
"Drag.init(document.getElementById('" + ctrl.ClientID & "'), _
null, null, null, null, null, false, false); </SCRIPT>"
Page.RegisterStartupScript("FocusScript", focusScript)
End Sub
Private Sub Panel1_PreRender(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Panel1.PreRender
ControlToDrag(Panel1)
End Sub
Here, Panel1
is the ID
of the ASP Panel
placed on the form, which acts as a container to the custom web message box.
Finally, add the following subroutine in your code behind, and call this in Page_Load
event.
VB.NET
Private Sub CheckYesNo()
If Request.Form("yesno") = "Yes" Then
Response.Write("Button - Yes - Selected")
ElseIf Request.Form("yesno") = "No" Then
Response.Write("Button - No - Selected")
ElseIf Request.Form("yesno") = "Cancel" Then
Response.Write("Button - Cancel - Selected")
End If
NBox.SetEnabledAll(True, Me)
End Sub
C#
public void CheckYesNo()
{
if (this.Request.Form["yesno"]== "Yes")
Response.Write("Button - Yes - Selected");
elseif (this.Request.Form["yesno"]== "No")
Response.Write("Button - No - Selected");
elseif (this.Request.Form["yesno"]=="Cancel")
Response.Write("Button - Cancel - Selected");
myBox.SetEnabledAll(true,this);
}
Enhancements:
This MessageBox
control works similar to the classic Windows MsgBox
, and contains all the properties and events. It does not require any enhancements. In fact, the message box is developed using VB.NET (Web based). Now I am trying to convert it to C#, to further increase its performance and integrate DLLs into a single one.
Using The Code (DLLs)
I am also placing a full demo ZIP of this MessageBox
functionality in a separate ZIP file: a fully featured Data Entry Form which interacts with a Service Layer feature to perform DML transactions. The two DLLs can be found in the same project folder (NewMessageBox.dll and WebControlDragerS.dll). You can check the use of message box to add and save a new record. You can just explode the ZIP file and use it.
Different Views of Server Side Message Box
Happy Instantiating..!!
Rock’n Roll….. ………………
By Bye.
Anwar Hussain is a Software Developer (Project Leader) presently working for an MNC based in Bangalore, Karnataka ( I N D I A ). He is an Microsoft Certified Application Developer ( .NET ) and presently working on .NET Technology.
If you want to have a drink or go to a rock concert with me please feel free to contact... ..!!