“In user interface design, a modal window is a child window that requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.” (source: Wikipedia)
Modal windows in websites are client-controlled windows. A modal window is opened using a piece of Javascript:
var result = window.showModalDialog("/MyModalWindow.aspx"", """", ""status:no"");
alert(result);
The modal window return value is also generated using client side Javascript:
window.returnValue = "OK"; window.close();
When you want to use a modal window from server-side C# code you can choose between several strategies. This is a strategy I have used with success.
Step 1: Set up the Modal window
This sample modal window contains only 2 buttons, an OK button and a Cancel button. Both buttons are server-side buttons. This is the HTML for my modal window:
<head runat="server"> <title>My Modal Window</title> <base target="_self" /> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnOK" runat="server" text="OK" onclick="btnOK_Click" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" onclick="btnCancel_Click" /> </div> </form> </body> </html>
Please notice the <base target=”-self”/> tag in the header. Without this tag, all postbacks will open a new window.
The codebehind for the OK and Cancel button are the same, except for 2 things:
- When pressing the “OK” button i set the data to return from the modal window in a Session variable.
- The modal window return value is “OK” if I pressed btnOK or “Cancel” if I pressed btnCancel.
When pressing a button I simply generate a client script block that will close my window:
protected void btnOK_Click(object sender, EventArgs e)
{
Session["MySession"] = "this is the data to return from my modal window";
StringBuilder sb = new StringBuilder();
sb.AppendLine(@"<script language=""javascript"" type=""text/javascript"">");
sb.AppendLine(@" window.returnValue = ""OK""");
sb.AppendLine(@" window.close();");
sb.AppendLine(@"</script>");
ClientScript.RegisterClientScriptBlock(GetType(), "close", sb.ToString());
}
protected void btnCancel_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.AppendLine(@"<script language=""javascript"" type=""text/javascript"">");
sb.AppendLine(@" window.returnValue = ""Cancel""");
sb.AppendLine(@" window.close();");
sb.AppendLine(@"</script>");
ClientScript.RegisterClientScriptBlock(GetType(), "close", sb.ToString());
}
Step 2: The calling code
The modal window is called by pressing a button from a Web Form.
<head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnOpen" runat="server" Text="Open Modal Window" onclick="btnOpen_Click" /> </div> </form> </body> </html>
The button also generates a startup script when clicked:
protected void btnOpen_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.AppendLine(@"<script language=""javascript"" type=""text/javascript"">");
sb.AppendLine(@" var result = window.showModalDialog(""/MyModalWindow.aspx"", """", ""status:no"");");
sb.AppendLine(@" if (result == ""OK"")");
sb.AppendLine(@" " + Page.ClientScript.GetPostBackEventReference(form1, "MyArgument"));
sb.AppendLine(@"</script>");
ClientScript.RegisterStartupScript(GetType(), "btnOpen", sb.ToString());
}
The Javascript does the following:
- Opens the modal window and waits for a return value.
- If the return value is “OK” (= the user clicked the “OK” button in the modal window) I do a client-side postback, posting an argument called “MyArgument” (it is the GetPostBackEventReference that handles the postback for me).
The postback can be intercepted on the Page_Load event by looking for the value “MyArgument” in the __EVENTARGUMENT querystring. If such value exist, I can retrieve the value from the modal dialog:
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["__EVENTARGUMENT"]) && Request["__EVENTARGUMENT"] == "MyArgument")
{
string value = Session["MySession"];
// now I can work with the value from the modal window
}
}
Brian Pedersen's Sitecore and .NET Blog 
Pingback: showModalDialog returnValue is undefined in Google Chrome | Brian Pedersen's Sitecore and .NET Blog
Pingback: ASP.NET: Open aspx page as modal popup onclick | Masud Ahmed