venerdì 5 agosto 2011

How To: OnClientActiveTabChanged TabContainer

Posto che abbiate utilizzato il tab panel del ajaxToolkit per il framework 4.0 e che vi serva sapere lato client quale tab è stato selzionato potrebbe tornarvi comodo queto esempio.

Questo è il tab Panel

<asp:TabContainer ID="tbMain" runat="server" 
OnClientActiveTabChanged="ActiveTabChanged">
<asp:TabPanel ID="tbpFstTab" runat="server" HeaderText="1 Tab">
<ContentTemplate>
Questo è il primo tab...
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tbpSndTab" runat="server" HeaderText="2 Tab">
<ContentTemplate>
Questo è il secondo tab...
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tbpTrdTab" runat="server" HeaderText="3 Tab">
<ContentTemplate>
Questo è il terzo tab...
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>


L'evento si deve chiamare proprio così "ActiveTabChanged" se usate altri
nomi che per voi magari sono più evocativi.. non va!

In un tag script potete scrivere quanto segue per gestire l'evento.

function ActiveTabChanged(sender, args) {

var tabIndex = sender.get_activeTabIndex();
switch (tabIndex) {
case 0: ToDoFunction();break;
case 1: ToDoFunction();break;
case 2: ToDoFunction();break;

break;
}
}


Questa: ActiveTabChanged(sender, args) ha tanto l'aspeto di un Handler, tanto che sender è propio il tabPanel che state utilizzando.

Un buon esercizio è provare a vedere in debug cosa realmente contine sender.

Nessun commento: