Modal popup only if validators pass

Hi. I would like my required field validators to be enforced prior to opening the modal popup. What is the best approach?

Thanks,
Brian

In the latest release of the Toolkit the modalpopup sample page demonstrates how to show and hide the modal popup programmatically. You candownload the source code from here and check out the sample website(the Toolkit sample website is not live yet so it will not show the new page). In the click handlers of the buttons that show/hide the modal popup you can add clauses to show it in only when certain conditions are met.

// Add click handlers for buttons to show and hide modal popup on pageLoad function pageLoad() { $addHandler($get("showModalPopupClientButton"),'click', showModalPopupViaClient); $addHandler($get("hideModalPopupViaClientButton"),'click', hideModalPopupViaClient); } function showModalPopupViaClient(ev) { ev.preventDefault(); var modalPopupBehavior = $find('programmaticModalPopupBehavior'); modalPopupBehavior.show(); } function hideModalPopupViaClient(ev) { ev.preventDefault(); var modalPopupBehavior = $find('programmaticModalPopupBehavior'); modalPopupBehavior.hide(); }

Modal popup question

In the description of the modal popup the following statement poses a problem:

If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render.

My question is: How do you allow the OK?Cancel control to postback? Any suggestion appeciated.

Hi

I think we are working on the same issue.

To be able to have the postback working you need to add and set the UseSubmitBehavoir to false for the OK/Cancel controls, e.g

<asp:ButtonID="OkButton"runat="server"Text="OK"OnClick="OkButton_Click"UseSubmitBehavior=false></asp:Button>

To be able to have the postback working you need to add and set the UseSubmitBehavoir to false for the OK/Cancel controls, e.g

Now it will it the OnClick handler:

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = TextBox1.Text;

}

But now I have another issue, my TextBox1.Text is empty even if the suer typed some text. Anyone knows how to solve this ?

David knows better than I but I believe you'll get a postback if you don't specify an OnOK script value to the extender.

Thanks, that works. I assume that the UseSubmitBehaviour="False" causes the javascript not to be run. The paragraph doesn't get formatted.

The textbox gets filled OK and the datalist hidden using this OkButton_click (I am tinkering with the source of the sample website here):

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

DataList1.Visible =

False

TextBox1.Text =

"Hallo"EndSub

I don't have any ONOkScript defined for the extender.

The only way I found to get a postback is to add the

UseSubmitBehavior=false

But After that in my handler I get empty string:

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = TextBox1.Text;

}

str is equal to ""

Why that, any idea ? and solution. Thanks

I added a label an tried the following:

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

DataList1.Visible =

FalseDim strAsString = TextBox1.Text

Label1.Text = TextBox1.Text

EndSub

And this works. If you have a breakpoint on the linestring str=TextBox1.Text than str will be "" or null when standing on the breakpoint while debugging (the line hasn't been run yet)

I noticed by the way that the event sub is visited twice (anybody who knows why this is the case?).

could you show me please your aspx or ascx to see how you defined the extender and the rest. That might help

This is just some tinkering about with ModalPopup.aspx from the sample. I put it in a new page (default2.aspx) and moved the link and the ModalPopupExtender to the item template of the datalist (I have plans with a datalist).

Hope this comes out readable:

Default2.aspx:

<%

@.PageLanguage="VB"AutoEventWireup="false"CodeFile="Default2.aspx.vb"Inherits="Default2" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<%

@.RegisterSrc="~/CollapsibleContent.ascx"TagPrefix="Demo"TagName="CollapsibleContent" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/><title>Untitled Page</title>

</

head>

<

body><formid="form1"defaultbutton="okbutton"runat="server"><atlas:ScriptManagerid="ScriptManager"runat="server"></atlas:ScriptManager><divclass="demoarea"/><divclass="demoheading">ModalPopup Demonstration</div><pid="Paragraph1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</p><p> </p><scripttype="text/javascript">var styleToSelect;function onOk() {

$(

'Paragraph1').className = styleToSelect;

}

</script><div><divstyle="display:none"><asp:PanelID="Panel1"runat="server"CssClass="modalPopup"><p>Choose the pagagraph style you would like:</p><br/><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioA"onclick="styleToSelect = 'sampleStyleA';"/><labelfor="RadioA"class="sampleStyleA"style="padding:3px;">Sample paragraph text</label></p><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioB"onclick="styleToSelect = 'sampleStyleB';"/><labelfor="RadioB"class="sampleStyleB"style="padding:3px;">Sample paragraph text</label></p><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioC"onclick="styleToSelect = 'sampleStyleC';"/><labelfor="RadioC"class="sampleStyleC"style="padding:3px;">Sample paragraph text</label></p><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioD"onclick="styleToSelect = 'sampleStyleD';"/><labelfor="RadioD"class="sampleStyleD"style="padding:3px;">Sample paragraph text</label></p><br/><center><asp:ButtonID="OkButton"runat="server"Text="OK"UseSubmitBehavior="false"OnClick="OkButton_Click"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></asp:Panel></div><br/><asp:DataListID="DataList1"runat="server"DataKeyField="Onderzoek_id"DataSourceID="ObjectDataSource1"RepeatColumns="5"BackColor="White"BorderColor="#CC9966"BorderStyle="None"BorderWidth="1px"CellPadding="4"GridLines="Both"><ItemTemplate><asp:LabelID="Onderzoek_idLabel"runat="server"Text='<%# Eval("Onderzoek_id") %>'></asp:Label><br/><asp:LabelID="Onderzoek_naamLabel"runat="server"Text='<%# Eval("Onderzoek_naam") %>'></asp:Label><br/><br/><asp:LinkButtonID="LinkButton1"runat="server"Text="Click here to change the paragraph style"></asp:LinkButton><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="True"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender></ItemTemplate><FooterStyleBackColor="#FFFFCC"ForeColor="#330099"/><SelectedItemStyleBackColor="#FFCC66"Font-Bold="True"ForeColor="#663399"/><ItemStyleBackColor="White"ForeColor="#330099"/><HeaderStyleBackColor="#990000"Font-Bold="True"ForeColor="#FFFFCC"/></asp:DataList><asp:ObjectDataSourceID="ObjectDataSource1"runat="server"DeleteMethod="Delete"InsertMethod="Insert"OldValuesParameterFormatString="original_{0}"SelectMethod="GetData"TypeName="RigonetTableAdapters.OnderzoekenTableAdapter"UpdateMethod="Update"><DeleteParameters><asp:ParameterName="Original_Onderzoek_id"Type="Int32"/></DeleteParameters><UpdateParameters><asp:ParameterName="Onderzoek_naam"Type="String"/><asp:ParameterName="Original_Onderzoek_id"Type="Int32"/></UpdateParameters><InsertParameters><asp:ParameterName="Onderzoek_naam"Type="String"/></InsertParameters></asp:ObjectDataSource><asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/><asp:LabelID="Label1"runat="server"Text="Label"Width="156px"></asp:Label></div></form>

</

body>

</

html>

default2.aspx.vb:

Partial

Class Default2Inherits System.Web.UI.Page

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

DataList1.Visible =

FalseDim strAsString = TextBox1.Text

Label1.Text = TextBox1.Text

EndSubProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.LoadEndSub

End

Class

This version is shorter and without the datalist (default3.aspx). This works on my machine (it is supposed to be in the SampleWebSite folder, uses the stylesheet but not the masterpage).

Default3.aspx:

<%

@.PageLanguage="VB"AutoEventWireup="false"CodeFile="Default3.aspx.vb"Inherits="Default3" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<%

@.RegisterSrc="~/CollapsibleContent.ascx"TagPrefix="Demo"TagName="CollapsibleContent" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><div><atlas:ScriptManagerid="ScriptManager"runat="server"></atlas:ScriptManager><divstyle="display:none"><asp:PanelID="Panel1"runat="server"CssClass="modalPopup"BorderColor="Black"BorderStyle="Solid"><center><asp:ButtonID="OkButton"runat="server"Text="OK"UseSubmitBehavior="false"OnClick="OkButton_Click"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></asp:Panel></div><asp:LinkButtonID="LinkButton1"runat="server"Text="Click here"></asp:LinkButton><br/><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="True"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender><br/><br/><asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/><asp:LabelID="Label1"runat="server"Text="Label"Width="156px"></asp:Label></div></form>

</

body>

</

html>

Default3.aspx.vb

Partial

Class Default3Inherits System.Web.UI.PageProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.ClickDim strAsString = TextBox1.Text

Label1.Text = TextBox1.Text

EndSub

End

Class

To clarify, the original intention was that people who wanted postback behavior for an OK would simply not set the OkControlID or OnOkScript properties of the ModalPopup and therefore it wouldn't hook up to the control and ASP.NET's normal postback mechanism would take place.

However, I've looked into the behavior as a result of this thread and see that's not actually the case. :( The problem seems to be that the following statement in the behavior's initialize method causes the OK button to not postback: "document.body.appendChild(_foregroundElement);". That statement's there to move the modal element to later in the page order than the background element that it creates so that it will be drawn on top of it. However, that statement moves the OK button (an input/submit element) outside the form element and that seems to cause it to not postback.

One alternative is to use the UseSubmitBehavior property of the target control to change its submit behavior as folks have suggested above (see also the ASP.NET documentation for details). This seems perfectly reasonable and seems to be working for some of you. Thanks for identifying that!

Another alternative is to change the code in ModalPopup's initialize method as seen below. The comments describe how the change does conceptually the same thing, but keeps the elements within the form element so that the default postback behavior will still work.

I think I prefer the UseSubmitBehavior solution if it works well, so please let us know if it does. We'll probably create an FAQ for this and document the change.

Thanks for bringing this up; sorry for the trouble!

this.initialize = function() {

AtlasControlToolkit.ModalPopupBehavior.callBaseMethod(this, 'initialize');

// Standard ASP.NET client-side code for finding its form element

var theForm = document.forms['aspnetForm'];

if (!theForm) {

theForm = document.aspnetForm;

}

_backgroundElement = document.createElement('div');

_backgroundElement.style.display = 'none';

_backgroundElement.style.position = 'absolute';

if (_BackgroundCssClass) {

_backgroundElement.className = _BackgroundCssClass;

}

// Append to the form

theForm.appendChild(_backgroundElement);

_foregroundElement = $(_PopupControlID);

_foregroundElement.style.display = 'none';

_foregroundElement.style.position = 'absolute';

// Append to the form

theForm.appendChild(_foregroundElement);

// Note: Safari doesn't support cancellation of link clicks added by

// addEventListener, so we must add them with "onclick ="

David,

Thanks for the explanation :-)

I still have an issue. What I am trying to achieve is to have an asp:Login in a ModalPopup.

So on my page I have the asp:Login that I changed to template mode and in the LayoutTemplate I modified the asp:Button LoginButton to add UseSubmitBehavior="false" and a OnClick="LoginButton_Click".

In my code behind I have the handler defined like something like this:

protected void LoginButton_Click(object sender, EventArgs e)
{

TextBox tbUserName = LoginView1.FindControl("LoginPanel").FindControl("LoginCtrl").FindControl("UserName") as TextBox;
TextBox tbPassword = LoginView1.FindControl("LoginPanel").FindControl("LoginCtrl").FindControl("Password") as TextBox;
Membership.ValidateUser(tbUserName.Text, tbPassword.Text);
}

The user click the link the ModalPopup is shown I type some text in the two textbox then I click Login and hit the break point I set in the OnClick handler. But there the values tbUserName.Text and tbPassword.Text are empty string. I can't get why.

Thanks for your welcomed help.

Ok I saw the difference between you and me.

I am talking about a TextBox in the ModalPopup Panel, so in your sample in Panel1.

In your case I also get back the text. But if you place the TextBox into the Panel1 then there are empty.

Yes, stupid of me. The coin finally dropped when I woke up this morning. The problem is that the postback fires twice: the second time around the textbox is empty and Label1.Text likewise.

You can see that placing a breakpoint or alternatively adding a label (label2) and changing the event sub to:

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

Label1.Text = TextBox1.Text

If Session("counter") =""Then

Session(

"counter") ="1"Else

Session(

"counter") = (CInt(Session("counter") + 1)).ToStringEndIf

Label2.Text = Session(

"counter")EndSub

When run label2 wil show "2". As to why there are 2 postbacks I have no idea. Suggestions will be highly appreciated. One could work around it using session variables like above but the 2 postbacks are noticable and ugly.

David,

Applying your patch has three problems:

1. The popup now only works with a master page. Default3.aspx will not work unless it has a master page.

2. The 2 postbacks I mentioned still fire.

3. The UseSubmitBehaviour="false" is still needed.

I was having this same issue and I got it working using UseSubmitBehaviour. But now the page updates using postback rather than using Atlas even if it is placed in UpdatePanel. How can fix this?

Modal Popup Validation

I have 2 required field validators in an update panel in my modal popup panel. I use Matt Gibson's Validator dll and tag mapping for validators inside update panels. However, in this modal popup, postback is not prevented. As you can see, I give the modal popup no control over the save button. Yes, the validation group is the same on the validators and the button. Yes, the validation appears onblur. With the errormessage displayed, if I click on the save button, the postback goes through. How do I fix this?

<ajaxToolkit:ModalPopupExtender runat="server" ID="mpe_fix"BackgroundCssClass="modalBackground"CancelControlID="btn_Cancel"PopupControlID="pnl_fix"TargetControlID="hdn_dummy" /><asp:Button runat="server" ID="btn_save"Text="Save"ValidationGroup="fix"CausesValidation="true" />

Bump.

Modal Popup: Will not access event handler in code behind prior to showing modal popup.

I have an AJAX modal popup that is tied to a 'Continue' button on a ASP.NET page. The issue is that I have required field validators with messages next to controls that need to be displayed if information is missing. Right now, the AJAX modal shows upon pressing 'Continue' regardless of if infomration is missing on the page. I put a break point in the event handler for the 'Continue' button and it never even gets hit.

How can I intervene and NOT show the modal popup untilall required field validators are satisfied?

if (Page.IsValid)
modalDialogExtender.Show()
else
//do nuthin

Yes and No. When pressing the button that is the TargetControlID of the modal box, the button event handler of that TargetID is is never reached prior to the modal being displayed. That is the No. However, I added a second hidden control as the TargetControlD that can not be accessed from the page to satisfy the modal's proerties. Then when my 'Continue' button is pressed, Yes, the code you provided works and is hit and the modal is shown programatically (assuming PageIsValid = True).

Thank you for the response.

ModalPopUp & ValidatorCalloutExtender Issue

I have required fields that are contained within the ModalPopUp, the problem arises when I submit the form the validation popup appears behind the modal form.

Has anyone encountered this before and if so have they come up with a solution?

Help would be appreciated on this!!

This is a valid scenario and we have seen issues where it would be reasonable to not have the modal popup to have the highest z-index. If you could open an issue to track this that would be great:http://www.codeplex.com/AtlasControlToolkit/WorkItem/Create.aspx. We will investigate possible solutions to make your scenario and other similar scenarios regarding the modal popup z-index.

I am having the same issue.

Any help would be appreciated.

I'm having the same issue. I have a required validator in modal popup, but OK button on the ModalPopup control ignores that required validator.

asp.net_programmer:

I'm having the same issue. I have a required validator in modal popup, but OK button on the ModalPopup control ignores that required validator.

I opened anissue for this on Codeplex, hopefully someone can give us an answer for this soon. If not updated ModalPopup control, then some kind of workaround would be helpfull. Thanks.

Any update on this issue?

Thanks in Advance.

Well I don't know if this adds to this discussion or not. I can not no matter what get it to center. I have no idea why it will not but all I see is the lower left corner and cancel button of my popup in the upper right corner. So I figured I would specify the X and Y properties to possition it. So I specified X=250 and y=250 and this was the only change the modal was visible now but in possition maybe 50,50 however now it was not active and greyed out with the background. Remove the X and the Y and it goes back so I can only see the cancel button but it is active again.

Selam Aleyk,

If location of the validatorcalloutextender control is in modal popup panel, it is working ok.

Oznur