Blog di LucaB

Come cambiare il tab visibile nel controllo Tabs dell'AJAX Control Toolkit usando JavaScript

In un sito web a cui sto lavorando ho inserito in una pagina il controllo Tabs dell'AJAX Control Toolkit. In questa pagina avevo l'esigenza di permettere al visitatore di cambiare il tab visibile anche mediante un link nella pagina stessa.

All'inizio ho provato semplicemente con un LinkButton inserito in un UpdatePanel, modificando dal lato server la proprietà ActiveTabIndex del TabContainer. Questa soluzione, semplicissima da implementare (anche se probabilmente genera parecchio codice superfluo), creava problemi con il rendering di una mappa visualizzata in uno dei tab (problema di cui ho scritto in un precedente post).

Allora ho provato ad utilizzare JavaScript, ma un primo abbozzo che sembrava funzionare senza problemi, in realtà si è dimostrato compatibile solo con IE (ho provato IE7, non so su IE6) e non con Firefox.

Dopo qualche inutile tentativo per rendere il mio approccio compatibile anche con Firefox, in questo post ho trovato la spiegazione del metodo giusto per affrontare il problema.

Il trucco è nel riferirsi al Behavior corrispondente al controllo (come sempre per i controlli dell'AJAX Control Toolkit), per il quale si trovano esposti i metodi e le proprietà "pubblici"^[1], accessibili lato client. Per accedere al Behavior, è sufficiente riferirsi in JavaScript alla proprietà control del TabContainer.

Riassumo qui come fare.

Dato un controllo Tabs, costituito da un TabContainer col nome MyTabs e dai TabPanel interni ad esso, ad esempio:

<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
  	<ajaxToolKit:TabPanel runat="server" ID="tab1">
		<HeaderTemplate> Uno </HeaderTemplate>
		<ContentTemplate> 
			Primo pannello
		</ContentTemplate>
	</ajaxToolKit:TabPanel>
	<ajaxToolKit:TabPanel runat="server" ID="tab2">
		<HeaderTemplate> Due </HeaderTemplate>
		<ContentTemplate>
			Secondo pannello
		</ContentTemplate>
	</ajaxToolKit:TabPanel>
	<ajaxToolKit:TabPanel runat="server" ID="tab3">
		<HeaderTemplate> Tre </HeaderTemplate>
		<ContentTemplate>
			Terzo pannello
		</ContentTemplate>
	</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>

Basterà inserire nella pagina il seguente codice BLOCKED SCRIPT

function changeTab( tabIndex ){ 
    var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
    tabBehavior.set_activeTabIndex(tabIndex); 
}

A questo punto un semplice collegamento ipertestuale, inserito in un punto qualsiasi della pagina (e quindi anche in uno dei TabPanel) può essere sufficiente a richiamare la funzione.

Ad esempio:

<a href="BLOCKED SCRIPTchangeTab(1);">Vai al secondo tab</a>

View blog reactions