Saturday, March 24, 2012

Invoking ModalPopupExtender causes Submit button to not postback

I have a simple webform that contains a textbox and a required field validator. The page also has a modal popup extender tied to a button as well as two other buttons for saving the page's input and canceling the pages changes. The cancel button has causesvalidation="false".

I run the web application and on the page in question click the button that causes modal popup to show and then hide the modal popup. The textbox on the page does not have any text and so the validator shows the invalid message. When I click the 'Cancel' button the first time the page does nothing. If I click it again, the server side event handler is fired. Given that causesvalidation is set to false I expected the server event handler to fire on both occasions.

Here is the sample code that displays the said behavior -

<asp:ScriptManager ID="scriptManager1" runat="server" />
<div>
<asp:Label ID="label1" Text="Label1" runat="server" />
<asp:TextBox ID="textbox1" runat="server" />
<asp:RequiredFieldValidator ID="textRequiredFieldValidator" ControlToValidate="textbox1"
Text="*" runat="server" />
<br />
<asp:Button ID="popperUpperButton" Text="Show Popup" runat="server" />
<asp:UpdatePanel ID="pageUpdatePanel" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Button ID="submitButton" Text="Send" OnClick="SubmitButton_Click" runat="server" />
<asp:Button ID="pageCancelButton" Text="Cancel" CausesValidation="false" OnClick="PageCancelButton_Click"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Label ID="statusLabel" runat="server" />
<act:ModalPopupExtender PopupControlID="modalPopupPanel" TargetControlID="popperUpperButton"
OkControlID="okButton" CancelControlID="leavePopupLinkButton" runat="server" />
</div>
<asp:Panel ID="modalPopupPanel" runat="server">
Just some text that is shown in the popup window.
<asp:Button ID="okButton" Text="OK" runat="server" />
<asp:LinkButton ID="leavePopupLinkButton" Text="Leave Popup" runat="server">
</asp:LinkButton>
</asp:Panel>

Server event handler code -

protected void Page_Load(object sender, EventArgs e)
{

}

protected void SubmitButton_Click(object sender, EventArgs e)
{
this.statusLabel.Text += "submit clicked...";
}

protected void PageCancelButton_Click(object sender, EventArgs e)
{
this.statusLabel.Text += "cancel clicked...";
}

Has anyone else seen this behavior and is there a known fix? I am seeing it consistently on the application I am building.

Thanks in advance,

Ruwan

Why are the submitButton and cancelButtons in an UpdatePanel but the textbox is not? Could you try to get the page working without the updatepanel first? I am not sure this issue has anything to do with the modalpopup being on the page.


Thanks for the response. I have tried the above with and without the updatepanel and see the same result. My reason for suspecting some coupling with the ModalPopupExtender is that the issue does not show up till the ModalPopupExtender is placed on the page.

The updated ASPX page reads -

<asp:ScriptManager ID="scriptManager1" runat="server" />
<div>
<asp:Label ID="label1" Text="Label1" runat="server" />
<asp:TextBox ID="textbox1" runat="server" />
<asp:RequiredFieldValidator ID="textRequiredFieldValidator" ControlToValidate="textbox1"
Text="*" runat="server" />
<br />
<asp:Button ID="popperUpperButton" Text="Show Popup" runat="server" />
<asp:Button ID="submitButton" Text="Send" OnClick="SubmitButton_Click" runat="server" />
<asp:Button ID="pageCancelButton" Text="Cancel" CausesValidation="false" OnClick="PageCancelButton_Click"
runat="server" />
<br />
<asp:Label ID="statusLabel" runat="server" />
</div>
<asp:Panel ID="modalPopupPanel" runat="server">
Just some text that is shown in the popup window.
<asp:Button ID="okButton" Text="OK" runat="server" />
<asp:LinkButton ID="leavePopupLinkButton" Text="Leave Popup" runat="server">
</asp:LinkButton>
</asp:Panel

Thanks,


have you tried adding a validationgroup attribute to the validator and the submit button. adding a attribute like validatorgroup="vg1" to both should cause all other control to ignore the validation except what is part of the group. This may help.


also, I will agree with kirtid, the use of the update panel may be part of the problem. Your update panel only wraps the 2 buttons, so clicking 1 will fire but you will not be able to see the results. if the label is NOT in the update panel. it will not be updated. Try moving the label into the update panel and see if it gets written to. also move the textbox and validator into the UP as well so they can be fired and accessed. I just ran that code with all of them inside the update panel, and it worked for me.

-Alan


Alan,

The ValidationGroup suggestion has provided a work-around for the test application, which now works fine. I will merge the solution in the product that first brought up the issue.

Thanks for the help!

No comments:

Post a Comment