Traduction

Cet article est la traduction la plus fidèle possible de l'article original : 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>) :

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

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.

 
Sélectionnez

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