ModalPopupExtender and validation problems

The problem I am facing is that when there is validation on a page and I am trying to display a model pop-up, the pop-up is not getting displayed. And by using fire-bug I have noticed that an error is being thrown.

The button that is used to display the pop-up has cause validation set to false so I am stuck as to what is causing the error.

I have created a sample page to isolate the problem that I am having, any help would be greatly appreciated.

The Error

function () {Array.remove(Page_ValidationSummaries, document.getElementById("ValidationSummary1"));}(function () {var fn = function () {AjaxControlToolkit.ModalPopupBehavior.invokeViaServer("mpeSelectClient", true);Sys.Application.remove_load(fn);};Sys.Application.add_load(fn);}) is not a function
http://localhost:1131/WebForm1.aspx
Line 136

ASP

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CLIck10.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:Button ID="btnPush" runat="server" Text="Push" CausesValidation="false" onclick="btnPush_Click" />
            <asp:TextBox ID="txtVal" runat="server" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtVal" ErrorMessage="RequiredFieldValidator" />
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />



        <asp:Panel ID="pnlSelectClient" Style="display: none" CssClass="box" runat="server">
        <asp:UpdatePanel ID="upnlSelectClient" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnOK" runat="server" UseSubmitBehavior="true" Text="OK" CausesValidation="false" OnClick="btnOK_Click" />
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancel_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        </asp:Panel>

        <input id="popupDummy" runat="server" style="display:none" />

        <ajaxToolkit:ModalPopupExtender ID="mpeSelectClient" runat="server" 
        TargetControlID="popupDummy"
        PopupControlID="pnlSelectClient" 
        OkControlID="popupDummy"
        BackgroundCssClass="modalBackground" 
        CancelControlID="btnCancel" 
        DropShadow="true"  />   
    </div>
</form>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CLIck10
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnOK_Click(object sender, EventArgs e)
        {
            mpeSelectClient.Hide();
        }

        protected void btnCancel_Click(object sender, EventArgs e)
        {
            mpeSelectClient.Hide();
        }

        protected void btnPush_Click(object sender, EventArgs e)
        {
            mpeSelectClient.Show();
        }
    }
}

This is an issue with using both ValidationSummary and ModalPopup.

see here: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=12835

The problem is that there is a missing ";" between the two injected scripts.

Their solution is to create/use a custom server control that inherits from ValidationSummary, that injects a ";" into the page startup script to fix the bug:

[ToolboxData("")]
public class AjaxValidationSummary : ValidationSummary
{
  protected override void OnPreRender(EventArgs e)
  {
    base.OnPreRender(e);
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID, ";", true);
  }
}

Try setting your ValidationSummary "Enabled" property to false on this event : "btnPush_Click" ; and then setting it back to enabled = "true" on this events : "btnOK_Click" ,"btnCancel_Click".

I think this will work if you do not have the validation summary inside the Panel that you want to pop up.But it is not a solution if you need the validation summary inside the pop up panel,...witch is my case :(.

Best Regards.

I tried all the available answer online but didn't worked any. Then i tried to move my modal popup extender at very end of the HTML and it works fine for me. Me and my users are Happy :) I am not using FROM tag I am using Content place holder just like below:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
 <table id="tblMessage" runat="server" width="100%" >
    <tr align="center">
        <td align="center">

main content and

<asp:Panel ID="pnlSelectClient" Style="display: none" CssClass="box" runat="server">

  <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
    <asp:UpdatePanel ID="upnlSelectClient" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnOK" runat="server" UseSubmitBehavior="true" Text="OK" CausesValidation="false" OnClick="btnOK_Click" />
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancel_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </asp:Panel>

If you notice i have validation summary inside the panel because i want error message inside the pop up(i have some additional control in pop up too). and

Some more HTML tag here as i have so many other things to do in one page. right before closing tag of TABLE

<ajaxToolkit:ModalPopupExtender ID="mpeSelectClient" runat="server" 
    TargetControlID="popupDummy"
    PopupControlID="pnlSelectClient" 
    OkControlID="popupDummy"
    BackgroundCssClass="modalBackground" 
    CancelControlID="btnCancel" 
    DropShadow="true"  />

</table>

Done.it's working. Hope that works for other too.

Are you using validation groups anywhere on the page? I've had problems with control events not firing when they are not part of a validation group and other controls on the page are part of a validation group.

I'd try changing this:

<input id="popupDummy" runat="server" style="display:none" />

to something like this:

<asp:Button id="popupDummy" runat="server" CausesValidation="false" Visible="false" />

I bet the untyped input is requiring validation.

i had the same issue, adding ValidationGroup to the validation controls did the trick!

One other thing to try, if you don't need Client Script you can disable it in the markup. Doing that fixed our problem.

EnableClientScript="false"

来源：https://stackoverflow.com/questions/1466051/modalpopupextender-and-validation-problems

标签

ASP.NET

ajax

modalpopupextender