Types of Dialogs in dot net framweork
.
Introduction
This document gives a brief overview on working with Modal and Modeless Dialog.
Dialogs can be mainly classified into two types.
1. Modal Dialog
2. Modeless Dialog
A Modal dialog is one which blocks access (by mouse or keyboard) to any other parts of an application while visible. This can be used in a situation where the end user cannot do any useful work until a decision has been made.
A Modeless dialog on the other hand does not impose any restrictions to what the user can do. It offers greater flexibility to the end user as they are not forced to work in a specific flow decided by the developer.
Modal Dialog
The general syntax to open a Modal Dialog is
VReturnValue=window.showModalDialog (sURL [, vArguments] [, sFeatures])
Parameter Required/Optional Data Type Description
sURL Required String Specifies the url of the file to be opened as Modal Dialog
vArguments Optional Variant It is used to pass arguments of any data type to the modal window.
sFeatures Optional String Specifies the window ornaments for the dialog box.
The different sFeatures are:
dialogHeight:sHeight Sets the height of the dialog window (default unit is Pixels)
dialogLeft:sXPos Sets the left position of the dialog window relative to the upper-left corner of the desktop.
dialogTop:sYPos Sets the top position of the dialog window relative to the upper-left corner of the desktop.
dialogWidth:sWidth Sets the width of the dialog window (default unit is Pixels)
center:{ yes | no | 1 | 0 | on | off } Specifies whether to center the dialog window within the desktop. The default is yes.
dialogHide:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window is hidden when printing or using print preview. This feature is only available when a dialog box is opened from a trusted application. The default is no.
edge:{ sunken | raised } Specifies the edge style of the dialog window. The default is raised.
resizable:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window has fixed dimensions. The default is no.
scroll:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays scrollbars. The default is yes.
status:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays a status bar. The default is yes for untrusted dialog windows and no for trusted dialog windows.
unadorned:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays the border window chrome. This feature is only available when a dialog box is opened from a trusted application. The default is no.
help :{ yes | no | 1 | 0 | on | off} Specifies whether the dialog window displays the context-sensitive Help icon
Note: For Internet Explorer 7 or later, help is not a valid value for sFeatures.
The default unit for dialogHeight and dialogWidth in Internet Explorer 5 and later is pixels.However, we can use integer or floating point values also followed by absolute units (cm, mm, pt, in or pc) or a relative units designator (em, ex or px).
For example, the following JavaScript code opens a fixed dimension Modal dialog displayed at the center with no scrollbars, no help and with a status bar.
<script language="javascript">
var modalpopup = window.showModalDialog("Modal.aspx",'','dialogHeight: 650 px; dialogWidth:400 px; center: yes; help:no; resizable: no; scrollbars:no; status: yes;')
if(modalpopup==true){__doPostBack('','');}
</script>
Here the variable modalpopup is used to capture the return value from the modal window. This can be set in the modal window using window.returnValue.
<body MS_POSITIONING="GridLayout" onunload="window.returnValue=true">
This will default the return value to true whenever the Modal dialog is closed. It can be also set based on some action. For example clicking one button may set the return value to true ,clicking the other button may set the value to false.
If the return value is true, refreshing (PostBack) of Parent Page occurs.
The return value can also be used to perform some useful action on the Parent Page. In order to accomplish this, we need to pass the return value from the client side to the server side of the Parent Page.
Example:
In the Parent Page (Default.aspx), add the following code.
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Default.aspx.vb" Inherits="ModalAndModeless.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Default</title>
<meta content="Microsoft Visual Studio .NET 7.1"name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
function fnModalOpen()
{
var modalpopup = window.showModalDialog("Modal.aspx",'','dialogHeight: 650 px; dialogWidth:400 px; center:no; help:yes; resizable:yes; scrollbars:no; status:no;')
window.execScript("__doPostBack('','"+ modalpopup +"')","JavaScript");
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:button id="btnModal"runat="server" Text="Show Modal Dialog"></asp:button>
<asp:button id="btnModeless" style="Z-INDEX: 102; LEFT: 528px; POSITION: absolute; TOP: 128px"
runat="server" Text="Show Modeless Dialog"></asp:button>
<asp:TextBox id="txtResult" style="Z-INDEX: 103; LEFT: 464px; POSITION: absolute; TOP: 192px"
runat="server" AutoPostBack="True"></asp:TextBox>
</form>
</body>
</HTML>
In Page_Load event of the Default.aspx.vb file,add the function fnModalOpen() as an attribute to the btnModal button.
If Me.IsPostBack = False Then
Me.btnModal.Attributes.Add("onclick", "fnModalOpen();")
Else
Me.HandlePostback()
End If
The HandlePostBack() method can be used to capture the return value from the Modal window and perform corresponding action.
In the Modal.aspx file,
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Modal.aspx.vb" Inherits="ModalAndModeless.WebForm2"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm2</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<base target=_self>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
function fnYes()
{
window.returnValue=true;
window.close();
}
function fnNo()
{
window.returnValue=false;
window.close();
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:label id="Label1" style="Z-INDEX: 101; LEFT: 304px; POSITION: absolute; TOP: 80px" runat="server">Do u wish to return and act on the Parent window</asp:label>
<asp:Button id="btnYes" style="Z-INDEX: 102; LEFT: 256px; POSITION: absolute; TOP: 136px" runat="server"
Text="Yes"></asp:Button>
<asp:Button id="btnNo" style="Z-INDEX: 103; LEFT: 376px; POSITION: absolute; TOP: 136px" runat="server"
Text="No"></asp:Button></form>
</body>
</HTML>
In Modal.aspx.vb file,
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
Me.btnYes.Attributes.Add("onclick", "fnYes();")
Me.btnNo.Attributes.Add("onclick", "fnNo();")
End Sub
Now clicking the ‘Yes' button will set the return value to true and clicking the ‘No' button will set the return value to false.
In the fnModalOpen(),the variable modalpopup which is used to capture the return value from the Modal dialog is passed back to the server side using
window.execScript("__doPostBack('','"+ modalpopup +"')","JavaScript");
However in order to get the return value, atleast one control in Default.aspx should have the AutoPostBack property set to true. Otherwise __doPostBack will throw an error.
In the Default.aspx.vb file the return value from the client side can be captured as follows.
Private Sub HandlePostback()
Dim strArgs As String
'Get the Argument from the Client Side
strArgs = Request.Params.Get("__EVENTARGUMENT")
If strArgs Is Nothing = False And strArgs.ToUpper = "TRUE" Then
'Perform necessary action
Me.txtResult.Text = "Returned True"
Else
Me.txtResult.Text = "Returned False"
End If
End Sub
Based on the return value, we can perform corresponding action on the Parent Page.
However if we submit the form in a modal window, each time it will open a new page to process the request. To solve this, include this code in the <Head> section of the modal window.
<base target=_self>
Also if a modal dialog is opened for second time, Page_Load of the modal window will not occur by default as the data will be stored in Cache object. Suppose if we need to perform some action every time the modal window is opened, then the cache has to be expired before the modal window is called next time.
This can be done as follows.
Response.Cache.SetCacheability(HttpCacheability.NoCache)
Response.Cache.SetExpires(DateTime.Now.AddTicks(1))
Response.Cache.SetLastModified(DateTime.Now)
Response.Cache.SetAllowResponseInBrowserHistory(False)
The same can be accomplished by including the following code in the <Head> tag of the modal window(Modal.aspx)
<meta http-equiv="Pragma" content="no-cache">
Modeless Dialog:
The Modeless dialog allows the user to access the main window even the dialog is opened.
The general syntax to open a Modeless Dialog is
VReturnValue=window.showModelessDialog (sURL [,vArguments][,sFeatures])
where sURL, vArguments and sFeatures are same as that of a Modal dialog.
Both the methods must use a user initiated action, such as clicking a button, clicking on a link or pressing Enter, to open a pop up window. The Pop-up Blocker feature in Internet Explorer 6 blocks windows that are opened without being initiated by the user.
i tried my level best to get them displayed... but failed