Using modal windows from C# code

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
  }
}

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, c#, General .NET and tagged , , , , . Bookmark the permalink.

2 Responses to Using modal windows from C# code

  1. Pingback: showModalDialog returnValue is undefined in Google Chrome | Brian Pedersen's Sitecore and .NET Blog

  2. Pingback: ASP.NET: Open aspx page as modal popup onclick | Masud Ahmed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s