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();
        }
    }
}

回答1:

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);
  }
}

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

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

回答7:

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