Afficher une fenêtre Popup modale depuis du code serveur

Cet article est la traduction la plus fidèle possible de l'article original de Christian Wenz : Launching a Modal Popup Window from Server Code

Le contrôle ModalPopup du AJAX Control Toolkit offre une manière simple de créer une fenêtre popup modale en utilisant du code client. Toutefois, certains scénarios exigent que l'ouverture de la popup modale soit déclenchée depuis du code serveur.

Tout d'abord, un bouton Web ASP.NET contrôle est nécessaire pour montrer comment le contrôle ModalPopup fonctionne. Ajoutez ce bouton à l'intérieur de la balise <form> sur une nouvelle page :

<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />

Ensuite, vous avez besoin de code pour le popup que vous voulez créer. Définissez le comme un contrôle <asp:Panel> et assurez vous qu'il inclu bien un contrôle Button. Le contrôle ModalPopup offre la fonctionnalité à ce bouton de fermer la fenêtre, sinon il n'est pas facile de la faire disparaître.

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
	ASP.NET AJAX is a free framework for quickly creating a new generation of more
	efficient, more interactive and highly-personalized Web experiences that work
	across all the most popular browsers.<br />
	<asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Ensuite, ajoutez le contrôle ModalPopup de l'ASP.NET AJAX Toolkit à la page. Définissez les propriétés du bouton qui charge le contrôle, du bouton qui fait le fait disparaître et l'identifiant de la fenêtre pop-up.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton"
	PopupControlID="ModalPanel" OkControlID="OKButton" />

Comme avec toutes les pages Web basées sur ASP.NET AJAX, le ScriptManager est nécessaire pour charger les bibliothèques JavaScript nécessaires pour les différents navigateurs :

<asp:ScriptManager ID="asm" runat="server" />

Exécutez l'exemple dans le navigateur. Lorsque vous cliquez sur le bouton, la fenêtre modale apparaît. Afin d'obtenir le même effet en utilisant le code côté serveur, un nouveau bouton est nécessaire :

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" OnClick="ServerButton_Click" />

Comme vous pouvez le voir, un clic sur le bouton génère un postback et exécute la méthode ServerButton_Click() sur le serveur. Dans cette méthode, une fonction JavaScript appelée launchModal() est exécutée - pour être exact, la fonction JavaScript sera exécutée une fois que la page aura été chargé:

<script runat="server">
	protected void ServerButton_Click(object sender, EventArgs e)
	{
		ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
	}
</script>

Le travail de launchModal() est d'afficher la ModalPopup. Le fonction launchModal() est exécutée une fois que la page HTML complète a été chargée. A ce moment, toutefois, le framework ASP.NET AJAX n'a pas encore été complètement chargé. Par conséquent, la fonction launchModal() positionne juste une variable pour dire que le contrôle ModalPopup devra être affiché plus tard :

<script type="text/javascript">
	var launch = false;
	function launchModal()
	{
		launch = true;
	}

La fonction JavaScript pageLoad() est une fonction spéciale qui est exécuté une fois que le framework ASP.NET AJAX a été complètement chargé. Par conséquent, nous ajoutons le code à cette fonction pour afficher le contrôle ModalPopup, mais seulement si launchModal() a déjà été appelée :

	function pageLoad()
	{
		if (launch)
		{
			$find("mpe").show();
		}
	}
</script>

La fonction $find() recherche un élément à partir de son nom sur la page et attend l'identifiant côté serveur en tant que paramètre. Par conséquent, $find("mpe") renvoie la représentation coté client du contrôle ModalPopup; sa méthode show() fait apparaître le popup.