Sponsors

News

Jobping Laurent Kempé MVP JetBrains Academy Member Certified ScrumMaster

Contact

My status

View Laurent Kempé's profile on LinkedIn
XING
twitter
facebook


Xbox 360



Map

Locations of visitors to this page

.NET Dudes

Family

French .NET Dudes

Friends

Jobping

Links

Tech Head Brothers

Login control in an ASP.NET AJAX toolkit PopupControlExtender with a close button

I remember when I tried to implement a Login control in a ModalPopup with one of the early release of what was called at that time Atlas and is now called ASP.NET AJAX. I had lots of difficulties and now it works like a charm.

This time I would like to have a Login control in an ASP.NET AJAX PopupControlExtender from the ASP.NET AJAX Control Toolkit.

The implementation is really straight, a panel with a asp:Login in it:

<asp:Panel ID="loginPanel" runat="server" Style="display: none">
    <asp:Login ID="LoginCtrl" runat="server" 
        CssSelectorClass="THBLogin"
        FailureText="Identifiant incorrect ! Essayez ? nouveau..."
        LoginButtonText="S'identifier" 
        
        PasswordLabelText="Mot de Passe" 
        PasswordRequiredErrorMessage="Le mot de passe est requis."
        RememberMeText="Se souvenir de moi la prochaine fois." 
        TitleText="S'identifier"
        UserNameLabelText="Email" 
        UserNameRequiredErrorMessage="L'email est requis." 
        CreateUserText="S'enregistrer" 
        CreateUserUrl="/Register.aspx" 
        PasswordRecoveryText="Mot de passe oubli? ?" 
        PasswordRecoveryUrl="/PasswordRecovery.aspx" />
</asp:Panel>

Then you had the PopupControlExtender:

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
    TargetControlID="loginHyperLink"
    PopupControlID="loginPanel"           
    Position="Left" />

I also need a target control that will initiate the Popup display:

<asp:HyperLink ID="loginHyperLink" runat="server">S'identifier</asp:HyperLink>

Till now nothing really special.

Then I wanted to add a close button to this Popup, so I a added a div closeLoginPanel with an embedded link:

<asp:Panel ID="loginPanel" runat="server" Style="display: none">
    <div class="closeLoginPanel">
        <a title="Fermer">X</a>
    </div>
    <asp:Login ID="LoginCtrl" runat="server" 

This is not enough because I need to have the close action started when a user click on the link (X). I first looked at the javascript of the PopupControlExtender and saw that it handles the onclik of the body element so I added

<a onclick="document.body.click(); return false;" title="Fermer">X</a>

This was working fine on Internet Explorer 7 but was raising an error on FireFox 2. Looking in more detail in the javascript I finally changed my code to:

<a onclick="AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup(); return false;" title="Fermer">X</a>

This is working on both Internet Explorer and FireFox 2.

Here is the css I used:

.closeLoginPanel
{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    line-height: 17px;
    font-size: 11px;
    font-weight: bold;

    position: absolute;
    top:8px;
    right: 10px;
}

.closeLoginPanel a
{
    background-color: #6699CC;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    padding: 5px;
}

Here is the result:

Comments

interscape said:

Or I think you could have used a LinkButton control, and set the ModalPopupExtender "CancelButton" property to the LinkButton's ID. That would have done the same thing with far less hassle.

# January 27, 2007 9:10 PM

lkempe said:

Robert: Yeah for sure I could, if I used a ModalPopupExtender, but I am using a PopupControlExtender and there is no CancelButton there.

# January 28, 2007 4:42 AM

Steve B said:

Exactly what I was looking for.

Thanks!!!

SB

# March 14, 2007 12:36 PM

lkempe said:

Enjoy it Steve :)

# March 14, 2007 1:34 PM

Chris said:

Thanks a bunch, needed to be able to close a PopupControlExtender client side, and found the snippet here 'AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup();'.
# May 24, 2007 12:29 PM

Chris Davis said:

Thanks! This is working great - but I have one question: If you use asp:hyperlink without NavigateURL, the mouse pointer does not change to a hand when hovering over the link. How have you found a way around that?
# June 7, 2007 8:26 AM

lkempe said:

Chris: Use css to do that with cursor: pointer;

# June 7, 2007 8:42 AM

Thiago Perine said:

Hi Laurent, it has been worked fine, thanX!

       Thiago.

# June 27, 2007 11:01 AM

Ravi said:

If I want to close calendar after selecting the date then how it can be done?

# July 11, 2007 1:35 AM

Bianca said:

You're the greatest!!! I was looking for exactly this solution the whole morning. Finally I found it here and it works fine!

Thank you Laurent! You made my day :-D

Bianca

# July 26, 2007 9:54 AM

lkempe said:

Bianca: A pleasure !!! You are welcome :-)

# July 26, 2007 10:06 AM

Bianca said:

oh, just another one... i tried to call the function onMouseOver as well. I did this by using

onmouseover="this.click();"

very simple.

OnMouseOut I made it with your purpose.

All fine in IE

But unfortunatly FF does not recognize "this.click();" here. Error message: "this.click is not a function"

Any further idea ...?

Thanks a lot!

# July 26, 2007 10:14 AM

lkempe said:

Try out something like that:

if (elmt.click)

elmt.click();

else

{

var e = document.createEvent("MouseEvents");

e.initEvent("click", true, true);

elmt.dispatchEvent(e);

}

# July 26, 2007 10:22 AM

Bianca said:

I think it's the ASP.NET Label that's causing the problem in FF...

<asp:Label ID="lblPopupControl" runat="server"  onmouseover="this.click();" onmouseout="AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup(); return false;"></asp:Label>

Even if I try a simple alert() on mouseover I get no reaction .. :-(

# July 26, 2007 11:09 AM

Steve said:

Thanks Robert, just the job!

# August 4, 2007 6:09 AM

lkempe said:

Steve: My firstname is Laurent not Robert ! ;) why are you calling me Robert ?

# August 4, 2007 9:26 AM

mucnix said:

thanks buddy, worked for me

# August 6, 2007 8:45 AM

LeeLoo said:

Say I have a HyperLink control, I want to open another window after clicking on the link. The popup will close, but somehow it won't open another window even though I set the NavigateUrl. Do you have any idea to work around this?

# October 23, 2007 10:25 AM

Jon said:

Unbelievable that such a hack is necessary to close a PopupControlExtender.  To me it surely  looks like you are accessing a property and internal function that was not meant for direct calling outside of this control, given that its name starts with two underscores, "__VisiblePopup". Generally the underscores are meant to indicate an internal only property.  It is highly likely that in future release of the toolkit this code could break, given that you are relying on functionality that is meant for internal use only.

To me, this shows me how immature the asp.net ajax control toolkit is.

Hopefully members of the team responsible for the toolkit will take note of this, and improve their controls, offering "Public" client side functions (as well as code behind server functions) to do this and so many other things.

# November 7, 2007 11:15 AM

Courtney said:

This works great, but not in IE6.

# November 7, 2007 4:47 PM

Jon Whiting said:

Is there any way to have your main page served up http, but have the login stuff submit over https?

# November 9, 2007 8:07 PM

SR said:

What may be the best way to wire up this popup with an button in edit template so that when a user clicks on update button in <edittemplate>, a login popup is shown and only if the user is authenticated, the rowupdating(event) process may continue...

# November 26, 2007 12:27 PM

Steve said:

Sorry Laurent! I don't know why I called you Robert either! My brain cell must have been scrambled from trying to find the answer to the close window prob, of which your page answered elegantly

# December 15, 2007 9:11 AM

lkempe said:

Steve: no problem ;)

# December 15, 2007 9:16 AM

Alex said:

Hi,

Is it possible that textbox UserName after pop up was with in focus?

Thanks a lot.

# January 29, 2008 5:20 AM

siri said:

Great!!! I use it with Button in popupControlExtender and test it in IE, FireFox and Safari.

# February 20, 2008 10:03 AM

Philip said:

I haven't tried it, but apparently this also works:

OnClientClick="$find('popup').hidePopup(); return false;"

but you might need to make it an asp.net control for that to work?

# March 5, 2008 11:45 PM

CJ said:

This is good. But I'm finding if I add any positioning properties, e.g. Position or OffsetX, the login disappears! Why should that happen, I wonder?

# March 6, 2008 7:31 AM

kinjal.dixit said:

CJ: I added Position="Left" OffsetX="150" OffsetY="150" it worked fine on IE7

# April 18, 2008 10:52 AM

Mac said:

Do you have a working copy of this..when i try to implement on my app i get following this._postBackSettings.async is null or not an object

I have also tried using update panels on the page..the issue is how should i keep my popup open in case of there is login failure..

# May 1, 2008 5:42 PM

Ron said:

Has anyone come up with a solution to keep the login window open when the wrong credentials are entered?  I have not been successful after several different things, which is unfortunate because I really like this control.

# May 29, 2008 9:42 PM

Justin Kohnen said:

Worked like a charm. Thanks for the post.

# June 11, 2008 12:05 PM

k_nitin_r said:

Ron: On postback, the popup will be closed. You can use server-side code to show() the popup, perhaps in the PageLoad event using the IsPostBack flag or the event handler of the server control.

# June 29, 2008 12:30 AM

Bohboh said:

The Cancel() method seemed to do the trick rather nicely.  I'm using a button but should work just as well with a link button for the "X" text link.

# July 10, 2008 11:46 PM

maziz said:

very nice article but in case of FailureAction the popup closes and when we click on the link again the popup opens again with the red message that either your password or login is incorrect. how can we stop the whole page refresh and the popup from closing. Or is there any other way to stop the FailureAction.

# September 20, 2008 8:56 PM

Ron said:

Maziz,

I asked the same question  a couple of months back.  It appears that there is no way to both use Ajax to display the control without a page refresh, and to use the control in typical business scenarios. To me, if the control fails to alert the user that she/he has presented the wrong user name or password, without calling the show method (and having the control close/reopen), then it doesn't work.  Too bad, because if you have perfect users who never make a mistake, it's a fairly cool item....If you have one user who makes the mistake though, it is  a fairly useless item.

# November 11, 2008 1:39 PM

Tanveer said:

Did some one try this code by puting on the Master page?.

# December 20, 2008 10:06 AM

chrisseanhayes said:

Tanveer,

I did, works like a charm.  Visit my site and you'll see.

Anyone? My target control hyperlink button doesn't have any mouse over effects?  Can someone help?

# March 19, 2009 4:47 PM

hsmith825 said:

I have the problem of the popup cclosing when I get incorrect authentication of the user.  Are their any solutions out their?

Without solving this problem, the popup ocntrol is usless with login.

# October 25, 2009 11:52 PM

Thijs said:

Hey,

This article helped me a lot about a year ago so I'll try to make a little contribution.

I updated our site from AjaxToolkit 1.0 to the 3.5. This caused some problems, the position and visibility of the popupcontrol didn't work correctly and the close butten gave me the error:"ajaxcontroltoolkit is not defined"

solution:

To correct the position and the visibility, I needed to use the ToolkitScriptManager from the Ajaxtoolkit and not the scriptmanager from asp.net.

To get the close button to work I had to change:

"AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup(); return false;"

to

Sys.Extended.UI.PopupControlBehavior.__VisiblePopup.hidePopup();return false;

that's it.

greetz

# February 25, 2010 6:02 AM