Gérer les PostBacks depuis un contrôle Popup sans UpdatePanel

Cet article est la traduction la plus fidèle possible de l'article original: Handling Postbacks from A Popup Control Without an UpdatePanel

L'extendeur ControlPopup de l'AJAX Control Toolkit offre une façon simple d'ouvrir un Popup lorsqu'un autre contrôle est activé. Quand un PostBack se déclenche depuis un panel et que la page contient plusieurs panels, il est difficile de déterminer sur quel panel a cliqué l'utilisateur.

Quand vous utilisez un extendeur ControlPopup avec un PostBack, mais sans avoir d'UpdatePanel dans la page, le Control Toolkit ne permet pas de savoir quel élément client a déclenché le PostBack permettant l'ouverture de la Popup. Heureusement, il existe une petite astuce.

Voilà la situation: deux textboxs qui déclenchent la même popup, à savoir un calendrier. Deux PopupControlExtenders chargés de lier les textbox et la popup.

<form id="form1" runat="server">      
	<asp:ScriptManager ID="asm" runat="server" />      
	<div>           
		Departure date: <asp:TextBox ID="tbDeparture" runat="server" />           
		Return date: <asp:TextBox ID="tbReturn" runat="server" />      
	</div>      
	<asp:Panel ID="pnlCalendar" runat="server">           
		<asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />      
	</asp:Panel>     
	 <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"           
	 	TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />      
	 <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"           
	 	TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" /> 
</form>

L'idée de base est d'ajouter un champ caché dans l'élément <form> qui contiendra l'id de la textbox à l'origine de l'ouverture de la popup.

<input type="hidden" id="tbHidden" runat="server" />

Quand la page est chargée, le code Javascrip ajoute un gestionnaire d'événement aux 2 textbox: chaque fois que l'utilisateur clique sur une textbox, l'id de cette dernière est stocké dans le champ caché.

<script type="text/javascript">      
	function pageLoad()      
	{           
		$get("tbDeparture").onclick = saveTextBox;           
		$get("tbReturn").onclick = saveTextBox;      
	}      
	
	function saveTextBox()      
	{           
		$get("tbHidden").value = this.id;      
	} 
</script>

Côté serveur, il faut récupérer la valeur stockée dans le champ caché. Etant donné que les champs cachés sont facilement modifiables, il faut s'assurer que la valeur est valide. Une fois que la textbox a été identifiée, on y écrit la daté sélectionnée dans le calendrier.

<script runat="server">      
	protected void c1_SelectionChanged(object sender, EventArgs e)      
	{           
		string id = tbHidden.Value;           
		if (id == "tbDeparture" || id == "tbReturn")           
		{                
			TextBox tb = (TextBox)FindControl(id);                
			tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();           
		}      
	} 
</script>