Showing posts with label input. Show all posts
Showing posts with label input. Show all posts

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>

Updating multiple controls

I have an asp.net web site. I have many text boxes, drop downs and check boxes that need to be populated based on user input. I have a main text box for them to put in an ID number and a button to run my code. The problem is that the text boxes and check boxes are all over the form so I can't group them in one update panel.

Also, some of the check boxes, drop downs and text boxes can change the data in other controls based on user input. This causes so many post backs under normal conditions. If I put everything in an update panel, isn't that still going to cause just as many post backs?

Putting the whole page in one UpdatePanel will cause pretty much the same amount of data to be sent back to the server (the whole viewstate is always sent) and by the sounds of it pretty much the same amount of data comin back. It would reduce network traffic a bit and get rid of the screen flicker though.

You really need to put just the bits that update in multiple UpdatePanels, they will all get updated when one does. However, I'd go one step further and set all of them to UpdateMode="Conditional" so you can only update the panels you need to when you need to.


Thank you. I looked into that a bit further and also watched a video on multiple update panels. I will try this, conditional updates and add triggers to the update panels. Thanks again.

Updating UpdatePanel contents from Popup

Welcome, can you help me solving that problem

I have a UserControl UserControl1 that contains Gridview gridview1 and input Button button1, An UpdatePanel contains UserControl1 in a page, when i press that button1 it opens a popup window which contains a input button popUpButton and a TextField, the pop up is used to add a new record to the datasource of gridview1, Then i rebind the updated datasource to gridview1, Hover the problem is the gridview1 don't render the new row added although it's datasource is updated ..!
Notes:

- I tried to use both modes of UpdatePanel (Always and Condtional) but no hope
- The UpdatePanel is in the page NOT in Usercontrol1
- There is one ScriptManager and two other update panels in same page
- I use .NET Callback interface methods When I press popUpButton IN THE popup control so that i can trigger serverside update datasource process from client side javascrip code

so how i can render that changes from datasource to gridview??

Hi

This link helps youRefresh GridView in Parent Page.

Regards.