Un dialogue de login sous forme de popup utilisant ASP.NET AJAX et son toolkit.

Création d'un nouveau contrôle de login ASP.NET dans un PopupControlExtender d'ASP.NET AJAX Toolkit

Par Laurent Kempé publié le 28/01/2007 à 14:35, lu 17283 fois,

Je me propose de vous présentez tout au long de cette astuce une méthode permettant d'intégrer un contrôle ASP.NET Login dans un PopupControlExtender afin de fournir une méthode originale de login à votre site web.

Comme ASP.NET AJAX vient de sortir en version finale on se retrouve avec une version beaucoup plus stable permettant d'ajouter de nouvelles fonctionnalités à nos sites web ASP.NET. Cette version est bien entendu accompagnée d'une version finale elle aussi de ASP.NET AJAX Toolkit. Nous allons donc utiliser le contrôle PopupControlExtender du toolkit afin de réaliser notre nouveau contrôle de login.

Ce nouveau contrôle de login sera enrichi d'un bouton permettant de fermer le dialogue à tout moment. Voilà ce que nous cherchons à obtenir :

le login popup

Nous commençons par placer un contrôle ASP.NET de Login dans un contrôle de type Panel :

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

Puis nous ajoutons un contrôle de type HyperLink qui sera le déclencheur et commandera l'ouverture du popup :

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

Puis nous ajoutons le PopupControlExtender que nous lions à son déclencheur loginHyperLink ainsi qu'au Panel qu'il doit afficher loginPanel :

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"

TargetControlID="loginHyperLink"

PopupControlID="loginPanel"

Position="Left" />

Nous avons donc pour le moment un popup avec un contrôle de login mais qui ne se ferme que lorsque l'utilisateur s'identifie ou lorsqu'il click en dehors du popup. Nous voulons maintenant y ajouter un bouton permettant la fermeture du popup lorsque l'utilisateur cliquera dessus.

Pour cela nous ajoutons à notre Panel un tag HTML div avec un hyperlien à l'intérieur :

<asp:Panel ID="loginPanel" runat="server" Style="display: none">

</div>

<asp:Login ID="LoginCtrl" runat="server"

Maintenant que nous disposons de tous les éléments à afficher il nous reste à ajouter du code permettant de fermer le popup lorsque l'utilisateur cliquera sur le bouton. Mon premier essai a été le suivant après avoir observé le code du contrôle PopupControlExtender :

<asp:Panel ID="Panel1" runat="server" Style="display: none">

</div>

<asp:Login ID="LoginCtrl" runat="server"

Le souci avec le code précédent est qu'il marche sous Internet Explorer 7 et ne marche pas sous FireFox 2, car FireFox 2 ne reconnait pas document.body.close().

En y regardant de plus prêt encore une fois, j'ai modifié le code comme suit afin d'avoir une solution qui marche aussi bien sous Internet Explorer 7 que sous Firefox 2 :

<asp:Panel ID="loginPanel" runat="server" Style="display: none">

<a onclick="AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup(); return false;"

title="Fermer">X</a>

</div>

<asp:Login ID="LoginCtrl" runat="server"

La dernière touche est une touche design à l'aide de CSS afin de placer correctement mon bouton de fermeture dans la barre de titre du contrôle de login :

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

}

Voilà ce petit exemple vous a montré la simplicité d'utilisation d'ASP.NET AJAX et la puissance de son toolkit. Je vous encourage vraiment à explorer les différentes possibilités de ce framework qui ajoute un vrai dynamisme aux contrôles ASP.NET existant.

Pour finir le code au complet :

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

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Register.aspx">S'enregistrer</asp:HyperLink>

</span>

<asp:Panel ID="loginPanel" runat="server" Style="display: none">

</div>

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

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"

TargetControlID="loginHyperLink"

PopupControlID="loginPanel"

Position="Left" />

» Démarrer une discussion