Using Validation Controls on an UpdatePanel having an AJAX PopupExtender

Introduction

This article explains how to get around the problem of incompatible ASP.NET validation controls used on UpdatePanels in AJAX.

Background

UpdatePanel is not compatible with the ASP.NET validation controls in the current release. This creates a problem on popup controls created using the ModalPopupExtender control of the AJAX Toolkit.

Using the code

Let's say we have a user control which is used as an AJAX modal popup dialog.

In PopupDialog.ascx, we will have the following:

<AJAX:ModalPopupExtender ID="popup" TargetControlID="LinkButton1" 
  PopupControlID="popupControlPanel" runat="server" CancelControlID="CancelButton" />

The CancelControlID dictates that the popup should be hidden on clicking the CancelButton. The above works fine as long as there are no validation controls on PopupContainer. However, if a validation control is present on the popup, then that gets validated on Cancel Click, but the popup still gets hidden as expected.

If the validation was successful, then there is no problem; but if it fails, then the popup doesn't show up again even by clicking the button which opened it first time. Also, none of the AJAX postbacks will work thereafter on the page till it is refreshed.

This is because the focus is still with the control where the validation failed, which is now hidden.

Solution

To make the validators compatible with an UpdatePanel control, set the EnableClientScript property of the validators to false. This disables the client script that would ordinarily be used to perform validation in the browser. As a result, during an asynchronous postback, the validators perform validation on the server. However, because only the content of the UpdatePanel is refreshed, the validators can provide the kind of immediate feedback that is ordinarily provided by a client script.