Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

December 15, 2009

ASP.NET: Clearing Modal Dialogs

Filed under: ASP.NET,C#,VB.NET @ 3:08 pm

In my last post, I demonstrated how to build a modal dialog using the AJAX control in ASP.NET. As soon as you add validation to your modal dialog you will find the same issue that I did: Cancelling the dialog does not clear the content or validation messages.

Take this user scenario for example.

1) User clicks Security Question to open the security question dialog.

2) User enters the question, but no answer and clicks OK.

image

3) User clicks Cancel.

image

4) Sometime later on this same page, the user clicks Security Question again.

image

Notice that the entered text and validation message are still there.

Yes, this may be a far fetched scenario, but as you work with the ModalPopupExtender, you will see this issue come up again and again. In some cases, leaving the prior entered value may be OK. But in other cases, you want to open this modal dialog in a reset state.

There are several ways to attack this problem and this post covers two of them:

  • Use server-side code in the Cancel button to clear the dialog.
  • Use client-side script for the Cancel button to clear the dialog.

Using Server-Side Code

Using server-side script requires the following steps:

1) Remove the CancelControlID from the ModalPopupExtender control in the ASP.NET code. This allows the Cancel button to be processed by the server-side code.

2) Add a Click event handler for the Cancel button. Follow a technique similar to the OK button in my last post to set up the event handler.

NOTE: For C# ONLY, be sure to add the onclick attribute:

<asp:Button ID="CancelButton" runat="server"
    Text="Cancel" ToolTip="Click to cancel any changes" 
    CausesValidation="false"
    onclick="CancelButton_Click"/>

3) Add the desired code to the Cancel button Click event handler in the code behind file.

In C#:

Be sure to set a reference to the System.Web.UI namespace.

protected void CancelButton_Click(object sender, EventArgs e)
{
    // Clear the validators
    foreach (IValidator ctrl in Validators)
    {
        ctrl.IsValid=true;
    }

    // Clear the control contents
    QuestionTextBox.Text = String.Empty;
    AnswerTextBox.Text = String.Empty;

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

In VB:

Private Sub CancelButton_Click(ByVal sender As Object, _
         ByVal e As System.EventArgs) Handles CancelButton.Click
    ‘ Clear the validators
    For Each ctrl As IValidator In Validators
        ctrl.IsValid = True
    Next

    ‘ Clear the control contents
    QuestionTextBox.Text = String.Empty
    AnswerTextBox.Text = String.Empty

    ‘ Close the popup
    SecurityQuestionModalPopupExtender.Hide()
End Sub

This code first clears any validation controls. It then clears the text from both of the TextBoxes. Finally, it closes the modal dialog.

The down side of this approach is that it is server side. This means that it requires hitting the server to clear the dialog. A more performant approach is to use client-side scripting.

Using Client-Side Code

Using client-side script requires the following steps:

1) Ensure the ModalPopupExtender has both the CancelControlID and OnCancelScript attributes set:

<asp:ModalPopupExtender ID="SecurityQuestionModalPopupExtender"
   runat="server"
  TargetControlID="SecurityQuestionLink"
  PopupControlID="SecurityQuestionModalPopup"
  CancelControlID="CancelButton"
  OnCancelScript="OnSecurityQuestionCancel();"/>

The OnCancelScript attribute must be set to the name of the javascript function defined in the next step.

2) Write the javascript code:

<script language="javascript" type="text/javascript">
    /* On cancel of the Signin dialog, clear the fields */
    function OnSecurityQuestionCancel() {
        $get("QuestionTextBox").value = "";
        $get("AnswerTextBox").value = "";
        $get("QuestionValidator").innerHTML = "";
        $get("AnswerValidator").innerHTML = "";
    }
</script>

For this example, I added this javascript code to the head tag of the ASP.NET page.

This code uses the Ajax $get shortcut for the getElementById to find both TextBoxes and both validators. It then clears them. Because this is javascript, it has to work with the controls that are rendered. For the TextBox controls, these are HTML input controls that have a value attribute. For the validation controls, these are the HTML span controls. To clear those, you need to clear the innerHTML attribute.

Use one of these techniques any time you want to clear a modal dialog.

Enjoy!

RSS feed for comments on this post. TrackBack URI

Leave a comment

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