Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

December 15, 2009

ASP.NET: Modal Dialogs

Filed under: ASP.NET,C#,VB.NET @ 2:27 pm

There are often times when your Web design includes a modal dialog. For example:  a login form, a dialog for entering basic information, a search form, or a data entry form. This post covers how to build a modal dialog in ASP.NET.

There are several advantages to using a modal dialog instead of another Web page:

  • The user does not have to navigate away from the current page. This allows the user to focus on the main information, yet enter criteria or other parameters in a modal dialog.
  • The code has better control over the dialog operations. That is to say that the user must provide some response to the modal dialog. However, the user can still navigate to another page or close the browser.

I mentioned in a recent post that after being away from ASP.NET for a while, I was surprise at how little had changed. But there is one area where ASP.NET has changed significantly: AJAX. If you have not downloaded the ASP.NET AJAX  toolkit, check it out here.

This post focuses on the ModalPopupExtender control that is part of the AJAX toolkit. In this example, the user sets a security question and answer in a modal dialog. If the user clicks on the Security Question link in the upper right corner, the Security Question modal dialog appears for entry of the question and answer.

image

As with most modal dialogs, this one implements validation. If the user clicks on OK without entering the required data, validation messages appear:

image

I wrote this example in both VB and C#. But since the only line of code that is different is the Page tag that defines the language, I am only showing the ASP.NET code one time.

In HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SampleWebCSharp._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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 id="Head1" runat="server">
    <title>Sample Web Page</title>
</head>

<body style="background-image: url(Images/Gradient2.jpg);background-repeat: repeat-x;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server"/>


        <!– Right side Link bar –> 
        <div style="text-align:right"> 
            <!– Signin Area –> 
            <asp:HyperLink ID="SigninLink" runat="server" 
                style="color:White;cursor:pointer" 
                ToolTip="Click to sign into the application" 
                Text="Sign in" /> 
            <label style="margin-left:8px;
                   margin-right:8px;color:White">|</label> 
            <asp:HyperLink ID="SecurityQuestionLink" 
                runat="server" 
                style="color:White;cursor:pointer" 
                ToolTip="Click to set the security question" 
                Text="Security Question" /> 
        </div> 
         <!– Security Question Popup –> 
        <asp:Panel ID="SecurityQuestionModalPopup" 
            runat="server" 
            Style="display:none;width:300px;
                   background-color:White; 
                   border-width:3px;border-style:solid;
                   border-color:#B92217;color:#7C1810;
                   padding:3px;"> 
            <asp:Label ID="Label1" runat="server" 
                Text="Security Question" width="300px"/><br /> 
            <br /> 
            <table style="width: 100%;"> 
                <tr> 
                    <td align="right"> 
                        <asp:Label ID="Label2" 
                         runat="server" 
                         Text="Question:"/> 
                    </td> 
                    <td> 
                        <asp:TextBox ID="QuestionTextBox" 
                         runat="server" Width="150"/> 
                    </td> 
                </tr> 
                <tr> 
                    <td align="right"> 
                        <asp:Label ID="Label3" 
                         runat="server" 
                         Text="Answer:"/>
                    </td> 
                    <td> 
                        <asp:TextBox ID="AnswerTextBox" 
                         runat="server" Width="150"/> 
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2"> 
                        <asp:RequiredFieldValidator 
                          ID="QuestionValidator" 
                          runat="server" 
                          ControlToValidate="QuestionTextBox" 
                          Display="Dynamic" 
            ErrorMessage="Please enter your security question.<br/>"/> 
                      <asp:RequiredFieldValidator 
                          ID="AnswerValidator" 
                          runat="server"
                          ControlToValidate="AnswerTextBox" 
                          Display="Dynamic" 
            ErrorMessage="Please enter the answer to your security question.<br/>"/> 
                    </td> 
                </tr> 
           </table> 
            <br /> 
            <!– Bottom Buttons –> 
            <div style="text-align:right"> 
                <asp:Button ID="OKButton" runat="server" 
                Text="OK" 
                ToolTip="Click to save the entered question/answer"/>  
                 <asp:Button ID="CancelButton" runat="server" 
                Text="Cancel"

CausesValidation="false"
                ToolTip="Click to cancel any changes"/> 
            </div> 
        </asp:Panel>

        <!– Define the modal dialog –> 
        <asp:ModalPopupExtender 
            ID="SecurityQuestionModalPopupExtender" runat="server" 
            TargetControlID="SecurityQuestionLink" 
            PopupControlID="SecurityQuestionModalPopup" 
            CancelControlID="CancelButton" /> 
    </form>
</body>
</html>

Notice at the very top of the code the Register tag registers the Ajax Control Toolkit. This line is added to your code automatically if you drag an Ajax control onto your WebForm.

The body tag uses a gradient image as shown in this prior post.

The ScriptManager control manages all of the Ajax features and is required on any page that uses Ajax controls.

The first div element contains the code to display the links in the upper right corner. No special code is required on these elements. The HyperLink control does not have an attribute to display the modal dialog. Rather, the ModalPopupExtender identifies the control that will cause it to popup. (More on this later in this post.)

The Panel control contains all of the controls that appear in the modal dialog. It also defines the style of the popup including its background color, foreground color, and border. Notice that the display style is set to none. This ensures that the popup does not display when the page is first rendered.

In this example, the modal dialog contains a title at the top, a table to layout the Labels and TextBoxes in the middle, and OK and Cancel buttons on the bottom. Notice that the Cancel button has its CausesValidation attribute set to false. This ensures that pressing the Cancel button won’t perform the validation and display the validation messages.

An additional row in the table provides an area to display validation messages. The validation controls have their Display attribute set to Dynamic so that space is not allocated to the message text unless there is a validation error.

Finally, the key part of this code: the ModalPopupExtender. The key attributes of this control in this example are:

  • TargetControlID: Id of the control that causes display of the modal dialog. In this case, it is the Security Question Hyperlink control at the top right of the page.
  • PopupControlID: Id of the control that is the modal dialog. In this case, it is the Panel control.
  • CancelControlID: Id of the button on the modal dialog that causes a cancel operation. By default, this closes the modal dialog.

Notice that the OKControlID attribute is not set for this control. By default, setting the OKControlID also closes the modal dialog, so validation messages won’t appear.

If you don’t set the OKControlID attribute, you can instead write code for the OK button in the code behind. This allows for the display of the validation messages. You can also perform processing, such as additional server-side validation or saving the entered values.

In C#:

using System;

namespace SampleWebCSharp
{
    public partial class _Default : System.Web.UI.Page
    {

        protected void OKButton_Click(object sender, EventArgs e)
        {
            // Do any additional processing, such as saving the values

            //Close the popup
            SecurityQuestionModalPopupExtender.Hide();
        }

    }
}

In VB:

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Private Sub OKButton_Click(ByVal sender As Object, _
               ByVal e As System.EventArgs) Handles OKButton.Click
        ‘ Do any additional processing, such as saving the values

        ‘ Close the popup
        SecurityQuestionModalPopupExtender.Hide()
    End Sub
End Class

NOTE: The technique you use to set up the events is very different in VB than in C#.

In C#:

  • Double-click on the control.
    In this example, this is not an easy task because the panel containing the button is hidden. So to use this method, you would need to temporarily make the panel not hidden, double-click on the button, and make the panel hidden again.
  • OR, manually type in the event signature in the code behind file.

With the first technique, Visual Studio automatically changes the Button attributes in your ASP.NET code as follows:

<asp:Button ID="OKButton" runat="server"
     Text="OK" ToolTip="Click to save the entered question/answer"
     onclick="OKButton_Click"/>

With the second technique, you need to add the onclick attribute yourself.

In VB:

  • Double-click on the control.
    Again, not so easy because the control is hidden.
  • OR, open the code behind file and use the two ComboBoxes at the top of the code editor. Select the control from the first ComboBox on the left. Select the event from the second ComboBox on the right. This is the best technique to use in this example.

NOTE: VB does NOT require a change in the ASP.NET code.

Use this technique any time you want to display a modal dialog from your Web page.

Enjoy!

1 Comment

  1.   Lavigne — August 13, 2011 @ 1:47 pm    Reply

    What a joy to find such clear tihkning. Thanks for posting!

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs