Modal Popup Closing when clicking OK, even if form validation fails

Question

I'm using the AjaxControlToolkit, which I haven't used in a while so I know I'm a bit rusty. I created a simple form in an asp:Panel with one field and a required field validator. I would like to keep the form from closing if the form is not valid. I can't seem to figure out how to accomplish this seemingly simple task. Code is provided from where I am right now. Does anyone know of a solution on how to accomplish this?

<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeBehind="Supplier_VAN_Config.ascx.cs"
            Inherits="PPGEDI.App_Controls.Supplier.Supplier_VAN_Config" %>


<asp:DropDownList ID="ddlVanGroups" 
                  runat="server" 
                  AutoPostBack="true"
                  OnSelectedIndexChanged="ddlVanGroups_selectedIndexChanged" /> 
<asp:LinkButton ID="addVanGroup" runat="server" Text="Add New VAN Group" />



<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="addVanGroup"
    PopupControlID="pnlAddVanGroup"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="addVanGroupOK" 
    CancelControlID="addVanGroupCancel" 
    PopupDragHandleControlID="pnlAddVanGroupHeader" />

<asp:Panel ID="pnlAddVanGroup" 
           runat="server" 
           style="display: none;" 
           CssClass="modalPopup" >
   <asp:Panel ID="pnlAddVanGroupHeader" 
           runat="server" 
           CssClass="modalHeader">
      Add New Van Group
   </asp:Panel>

   <div class="formInfo">
      <span class="formLabel">Group Name: 
         <asp:TextBox CssClass="formInput" 
                      ValidationGroup="AddNewVanPopup" 
                      ID="txtNewVanGroupName" 
                      runat="server" />
      </span>
      <asp:RequiredFieldValidator ID="rfvGroupName" 
                                  runat="server" 
                                  ValidationGroup="AddNewVanPopup"
                                  ControlToValidate="txtNewVanGroupName"
                                  Display="Static" 
                                  ErrorMessage="Group Name is required" 
                                  Text="Group Name is required" />

   </div>


   <asp:LinkButton ID="addVanGroupOK" 
                   Text="ADD" 
                   ValidationGroup="AddNewVanPopup"  
                   runat="server" />
   <asp:LinkButton ID="addVanGroupCancel" 
                   runat="server" 
                   Text="Cancel" />
</asp:Panel>

When I click the ADD button, when the text box is empty, it gives the error message and closes the box. When I click on the link again, the form comes back up, and the error message is still there. Do I need to handle this in javascript?

Answer 1

The problem with the code you submitted is that it use a OkControlID="addVanGroupOK". It close the popup and it absorb the server-side event for clicking on it. You could handles thing with the OnOkScript, but you will have to manually raise the addVanGroupOK_Click server-side event (and I suppose you need this event to raise).

I suggest Manually close the pop-up upon validation using javascript

here some script :

function HideMPEPopup() {
     $find(MPE).hide();

}
function ValidateAndHideMPEPopup() {
    //  hide the Popup 
    if (Page_ClientValidate('AddNewVanPopup')) {
        HideMPEPopup();
    }
}

Then just plug this script to the addVanGroupOK button and dont forget to remove the OkControlID from the ModalPopupExtender.

<asp:LinkButton ID="addVanGroupOK" 
               Text="ADD" 
               ValidationGroup="AddNewVanPopup"
               CausesValidation="true"
               OnClientClick="ValidateAndHideMPEPopup()"  
               />