模式弹出窗口在单击“确定”时关闭,即使表单验证失败也是如此

时间:2011-08-10 11:52:18

标签: asp.net ajaxcontroltoolkit modalpopupextender requiredfieldvalidator

我正在使用AjaxControlToolkit,我暂时没有使用它,所以我知道我有点生疏了。我在asp:Panel中创建了一个简单的表单,其中包含一个字段和一个必需的字段验证器。如果表单无效,我想保持表单关闭。我似乎无法弄清楚如何完成这个看似简单的任务。代码是从我现在的位置提供的。有谁知道如何实现这个目标的解决方案?

<%@ 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>

单击“添加”按钮时,如果文本框为空,则会显示错误消息并关闭该框。当我再次单击该链接时,表单将恢复,错误消息仍然存在。我是否需要在javascript中处理此问题?

1 个答案:

答案 0 :(得分:2)

您提交的代码存在问题,即它使用OkControlID="addVanGroupOK"。它会关闭弹出窗口并吸收服务器端事件以进行单击。您可以使用OnOkScript处理事物,但是您必须手动引发addVanGroupOK_Click服务器端事件(我想您需要引发此事件)。

我建议在使用javascript验证时手动关闭弹出窗口

这里有一些脚本:

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

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

然后只需将此脚本插入addVanGroupOK按钮,并且不要忘记从ModalPopupExtender中删除OkControlID

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