Monday, March 26, 2012

Updating Controls in a ModalPopup Possible?

Hello,

I am trying to use a modalpopup as a login prompt.

I've been able to put a couple textboxes in the modal, take input from those textboxes, and log a user in and redirect them or do whatever I would like. The problem I am having is when a user types in a wrong password, I need to display a "Invalid Password" lable to the user, hopefully in the modalpopup window.

The way I am validating a user is an XML call back to a third party server with custom software.

I havent tried to write a providor yet to use the .NET login things.

So my question boils down to, Can controls in an update panel be updated upon an OK click.

Thanks!

-Shane

Yes, it's possible. Though currently it will require a "work around". It will also require the reworked ModalPopupExtender that I know you are familiar with. There's a link in my sig.

First you need to do is create "fake buttons" for the OkControl and CancelControl property of the modalpopupextender. These buttons need to present at all times during your login routine, so place them at the very end of your popup panel. Also set them with a css style of display:none; The button controls visible property must be set to true.
Sean,

I will give this a try this tommarow when I'm back at the office.
I want to let you know that the Re-Worked ModalPopup is really good. It has solved quite a few problems.

Seeing as you seem so good with this stuff, thought I would ask a more diffucult question dealing with the modal popup.
I am using a modal in a gridview to display product information. To get the product information, I am using a web serivce (amazon webservice to be exact). On the click of the linkbutton on the gridview, I have the webservice kicked in to get the information, and sometimes it takes anywhere from 2 - 4 seconds to get the information about the product. I am using the onrowbound event to add attribs to the linkbutton for a window.timeout($object('modal')._show), 2000) or something like that to open the modal about 2 seconds after the linkbutton is clicked.
this works when the webservice returns the information before 2 seconds. If the request takes more than 2 seconds, the modal opens up, the request finishes, and the modal closes by itself. I have this modal setup with an update panel inside the modal, but currently, the update panel has the ok, cancel buttons included in it. I'll give it a try tommarow with those buttons outside of the update panel.
Anyways, seeing as you know more about all of this than me, I thought I would ask you :P
thanks for all your help
-shane

Hey Sean,

I got the login modal to update labels within it self doing just like you described.

However, I've ran into some minor problems that I thought I would see if you maybe have already solved.

1. How would I make a textbox get focus when the modal pops up?

2. How can I make the button the default button so when the user hits enter, it hits that button, and not a button on the page it self. Right now, if I hit enter, it fires an event tied to a button on the main page. if the main page does not have a button, then hitting enter works fine.

Any suggestions?

thanks for all the help, once again!

-Shane


Hi i live that problem. When i press Enter it opens the other Panel :S and it makes me crazy. By the way this is Header.ascx

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"BackgroundCssClass="modalBackground"

TargetControlID="lbLogin"PopupControlID="pnlLoginVisible"PopupDragHandleControlID="pnlLogin"

CancelControlID="lbClose">

</ajaxToolkit:ModalPopupExtender>

<asp:PanelID="pnlLoginVisible"runat="server"DefaultButton="LinkButton1"Style="display: none;">

<asp:PanelID="pnlLogin"runat="server"CssClass="modalPopup">

<asp:UpdatePanelID="UpdatePanelH"runat="server">

<ContentTemplate>

<divid="loginbackground">

<divid="logintop">

<divid="logintoptext1">

<asp:LabelID="Label6"runat="server"meta:resourceKey="lblLoginText"Text="Giri? Yap"></asp:Label>

</div>

<divid="logintopclose1">

<asp:LinkButtonID="lbClose"CssClass="logintopcloselink"runat="server"CausesValidation="false"

Text="Kapat"meta:resourceKey="lblClose"></asp:LinkButton>

</div>

</div>

<divid="loginbottom">

<divstyle="width: 290px; height: 40px; padding-left: 5px;">

<divclass="logintext2">

<asp:LabelID="Label7"runat="server"meta:resourceKey="lblUsernameText"Text="Kullan?c? Ad?:"></asp:Label>

</div>

<divclass="logininput2">

<asp:TextBoxID="txtLUserName"CssClass="logininputtext2"runat="server"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtLUserName"

ErrorMessage="*"ValidationGroup="Login"SetFocusOnError="True"></asp:RequiredFieldValidator>

</div>

</div>

<divstyle="width: 290px; height: 40px; padding-left: 5px;">

<divclass="logintext2">

<asp:LabelID="Label8"runat="server"meta:resourceKey="lblPassword"Text="Parola:"></asp:Label>

</div>

<divclass="logininput2">

<asp:TextBoxID="txtLPass"runat="server"CssClass="logininputtext2"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator2"ValidationGroup="Login"

runat="server"ControlToValidate="txtLPass"ErrorMessage="*"SetFocusOnError="True"></asp:RequiredFieldValidator>

</div>

</div>

<divid="loginbottom2">

<asp:LabelID="Label1"meta:resourceKey="lbLoginFailed"Visible="False"runat="server"Text="Yanl?? Kullan?c? Bilgisi"></asp:Label>

<!-- hata mesaj?n?n cikacagi yer -->

</div>

<divstyle="float: left; width: 130px; padding-left: 20px; padding-top: 6px;">

<asp:HyperLinkID="HyperLink1"CssClass="loginbottomlink2"NavigateUrl="~/forgotpassword.aspx"

meta:resourceKey="lblForgotPass"Text="Parolam? Unuttum"runat="server"></asp:HyperLink></div>

<divid="loginbottom3">

<asp:LinkButtonID="LinkButton1"OnClick="btnLogin_Click"CssClass="logintext3"ValidationGroup="Login"

runat="server"Text="Giri?"></asp:LinkButton>

</div>

</div>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

</asp:Panel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender2"runat="server"BackgroundCssClass="modalBackground"

TargetControlID="lbRegister"PopupControlID="pnlRegisterVisible"PopupDragHandleControlID="PnlRegister"

CancelControlID="lbRClose">

</ajaxToolkit:ModalPopupExtender>

<asp:PanelID="pnlRegisterVisible"DefaultButton="btnRegister"runat="server"Style="display: none;">

<asp:PanelID="PnlRegister"runat="server"CssClass="modalPopup2">

<divid="registertop">

<divid="registertoptext1">

<asp:LabelID="lblSignup"runat="server"meta:resourceKey="lblSignup"Text="üye Ol"></asp:Label>

</div>

<divid="registertopclose1">

<asp:LinkButtonID="lbRClose"CssClass="logintopcloselink1"CausesValidation="false"

runat="server"Text="Kapat"></asp:LinkButton>

</div>

</div>

<asp:UpdatePanelID="UpdatePanel2"runat="server">

<ContentTemplate>

<divid="registerbackground">

<divid="registerbottom">

<divclass="registertext1">

<asp:LabelID="Label2"Text="E-Posta:"meta:resourceKey="lblMail"runat="server"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtEposta"runat="server"CssClass="registerinput1"></asp:TextBox>

<asp:RequiredFieldValidatorValidationGroup="Register"ID="RequiredFieldValidator3"

runat="server"ErrorMessage="*"ControlToValidate="txtEposta"/>

</div>

<divclass="registertext1">

<asp:LabelID="Label3"meta:resourceKey="lblUserName"runat="server"Text="Kullan?c? Ad?n?z:"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtRUsername"runat="server"CssClass="registerinput1"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator4"runat="server"ValidationGroup="Register"

ControlToValidate="txtRUsername"ErrorMessage="*"></asp:RequiredFieldValidator>

</div>

<divclass="registertext1">

<asp:LabelID="Label4"meta:resourceKey="lblPass"runat="server"Text="Parola"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtSifre"runat="server"CssClass="registerinput1"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator5"ValidationGroup="Register"

runat="server"ErrorMessage="*"ControlToValidate="txtSifre"/>

</div>

<divclass="registertext1">

<asp:LabelID="Label5"meta:resourceKey="lblPassRep"runat="server"Text="Parola Tekrar?:"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtSifreTekrar"runat="server"CssClass="registerinput1"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidatorValidationGroup="Register"ID="RequiredFieldValidator6"

runat="server"ErrorMessage="*"ControlToValidate="txtSifreTekrar"/>

</div>

<div>

<divid="result"runat="server">

<asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"ControlToValidate="txtEposta"meta:resourceKey="RegUnValidEmail"ErrorMessage="Ge?ersiz e-mail adresi"SetFocusOnError="True"

ValidationGroup="Register"ValidationExpression="\w+([-+.']\w+)*@.\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator><br/>

<asp:CompareValidatorID="CompareValidator1"runat="server"ControlToCompare="txtSifre"

ControlToValidate="txtSifreTekrar"meta:resourceKey="RegUnMatchPass"ErrorMessage="?ifreler Uyu?muyor"

SetFocusOnError="True"></asp:CompareValidator><br/>

<asp:CustomValidatorID="CustomValidator2"ValidationGroup="Register"runat="server"

ClientValidationFunction="sifrevekullanici"meta:resourceKey="RegMinPasswordChr"

ControlToValidate="txtSifre"ErrorMessage="Parolan?z minimum 5 karakter olabilir."

SetFocusOnError="True"></asp:CustomValidator><br/>

<asp:CustomValidatorID="CustomValidator1"ValidationGroup="Register"runat="server"

ClientValidationFunction="sifrevekullanici"meta:resourceKey="RegMinUserChr"

ControlToValidate="txtRUsername"ErrorMessage="Kullan?c? ad?n?z minimum 5 karakter olabilir."

SetFocusOnError="True"></asp:CustomValidator><br/>

<asp:LabelID="lblRegisterError"CssClass="failed"runat="server"Text=""></asp:Label><br/>

<asp:LabelID="lbRegisterSucced"runat="server"CssClass="succes"meta:resourceKey="lbRegisterSucced"

Visible="false"Text="Kullan?c? kayd?n?z ba?ar?yla al?nm??t?r."></asp:Label>

<br/>

<asp:LabelID="lblRegisterFailed"runat="server"CssClass="failed"meta:resourceKey="lbRegisterFailed"Visible="false"Text="Hata olu?tu. Lütfen daha sonra tekrar deneyiniz."></asp:Label>

</div>

</div>

</div>

</div>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="btnRegister"EventName="Click"/>

</Triggers>

</asp:UpdatePanel>

<divclass="registerbutton1">

<asp:LinkButtonID="btnRegister"runat="server"OnClick="btnRegister_Click"CssClass="registerbuttonlink"

Text="üye Ol"ValidationGroup="Register"meta:resourceKey="btnRegister"></asp:LinkButton>

</div>

</asp:Panel>

</asp:Panel>

<tableclass="style1"align="center"cellpadding="0"cellspacing="0">

<tr>

<tdclass="style2">

</td>

<tdclass="style3">

<divid="head">

</div>

<divid="headover">

<divid="logo">

<imgsrc="images/logo.png"width="187"height="103"class="png"></div>

<divid="girismenu">

<divid="uyeol">

<asp:ImageButtonID="lbRegister"meta:resourceKey="ibRegister"runat="server"ImageUrl="~/images/uyeol.png"Width="55"Height="45"CssClass="png"CausesValidation="False"/>

</div>

<divid="cizgi">

</div>

<divid="girisyap">

<asp:ImageButtonID="lbLogin"runat="server"meta:resourceKey="ibLogin"ImageUrl="~/images/girisyap.png"

Width="60"Height="40"CssClass="png"CausesValidation="False"/>

<asp:ImageButtonID="lbLogOut"runat="server"CssClass="png"Height="40px"ImageUrl="~/images/cikis.png"meta:resourceKey="ibLogOut"

Width="60px"OnClick="lbLogOut_Click"CausesValidation="False"Visible="False"/></div>

</div>

No comments:

Post a Comment