Gérer les postbacks depuis un contrôle ModalPopup

Date de publication : 03 mai 2009 , Date de mise à jour : 03 mai 2009

Par Christian Wenz
 Philippe Vialatte (Traduction) (ma page DVP) (Blog)
 

Le contrôle ModalPopup de l'AJAX Control Toolkit offre une manière simple de créer un popup modal coté client. Des précautions particulières doivent être prises quand un postback est créé au sein de la popup.
Voir une démo
Téléchargez le code de ce tutoriel

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Étapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en  Handling Postbacks from a ModalPopup


Étapes

Afin d'activer les fonctionnalités d'ASP.NET AJAX, et du Control Toolkit, le contrôle ScriptManager doit être placé sur la page, n'importe où (mais dans l'élément <form>) : 

<asp:ScriptManager ID="asm" runat="server" />
Ensuite, ajouter un panneau qui servira de popup modal. Là, l'utilisateur peut entrer un nom et une adresse email. Un bouton est utilisé pour fermer la fenêtre et enregistrer les informations. Notez que l'attribut OnClick est défini de façon à ce qu'un postback se produise lorsque ce bouton est cliqué : 

<asp:Panel ID="ModalPanel" runat="server" Width="500px">      
	Name: <asp:TextBox ID="tbName" runat="server" /><br/>      
	Email: <asp:TextBox ID="tbEmail" runat="server" /><br/>      
	<asp:Button ID="OKButton" runat="server" Text="Save"OnClick="SaveData" /> 
</asp:Panel>
La page en elle-même se compose de deux contrôles label pour exactement les mêmes informations: nom et adresse e-mail. Un bouton est utilisé pour déclencher le popup modale : 

<div>      
	Contact Information:      
	<asp:Label ID="lblName" runat="server" Text="AJAX Fanatic"/><br />      
	<asp:Label ID="lblEmail" runat="server" Text="ajax@fanatic"/><br />      
	<asp:Button ID="btn1" runat="server" Text="Edit"/> 
</div>
Afin de faire apparaitre la popup, ajouter le contrôle ModalPopupExtender. Attribuez l'ID du panneau à l'attribut PopupControlID, et l'ID du bouton à l'attribut TargetControlID : 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"      
	TargetControlID="btn1" PopupControlID="ModalPanel" />
Maintenant, chaque fois que le bouton Save de la fenêtre modale est cliqué, la méthode côté serveur SaveData() est exécutée. Là, vous pouvez mettre les données entrées dans votre stockage de données. Par souci de simplicité, les nouvelles données sont juste affichées dans le Label : 

protected void SaveData(object sender, EventArgs e){      
	lblName.Text = HttpUtility.HtmlEncode(tbName.Text);      
	lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text); 
}
Aussi, les contrôles de zone de texte dans la popup modale doivent être remplis avec le nom et l'email courant. Toutefois, ce n'est nécessaire que lorsqu'aucun postback ne survient. S'il y a un postback, le viewstate ASP.NET va automatiquement remplir le texte avec les valeurs appropriées. 

void Page_Load(){      
	if (!Page.IsPostBack){           
		tbName.Text = lblName.Text;           
		tbEmail.Text = lblEmail.Text;      
	} 
}
La popup modale provoque un postback


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web