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:

39 Comments

  • 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.

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

  • Exactly what I was looking for.

    Thanks!!!

    SB

  • Enjoy it Steve :)

  • Thanks a bunch, needed to be able to close a PopupControlExtender client side, and found the snippet here 'AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup();'.

  • 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?

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

  • Hi Laurent, it has been worked fine, thanX!
    &nbsp; &nbsp; &nbsp; &nbsp;Thiago.

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

  • 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

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

  • 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!

  • Try out something like that:

    if (elmt.click)
    elmt.click();
    else
    {
    var e = document.createEvent("MouseEvents");
    e.initEvent("click", true, true);
    elmt.dispatchEvent(e);
    }

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



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

  • Thanks Robert, just the job!

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

  • thanks buddy, worked for me

  • 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?

  • 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.

  • This works great, but not in IE6.

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

  • 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 , a login popup is shown and only if the user is authenticated, the rowupdating(event) process may continue...

  • 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

  • Steve: no problem ;)

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

  • 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?

  • 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?

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

  • 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..

  • 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.

  • Worked like a charm. Thanks for the post.

  • 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.

  • 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.

  • 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.

  • 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.

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

  • Tanveer,
    I did, works like a charm. &nbsp;Visit my site and you'll see.
    Anyone? My target control hyperlink button doesn't have any mouse over effects? &nbsp;Can someone help?

  • 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.

  • 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

Comments have been disabled for this content.