Il blog di Luca Mauri

Un controllo TabContainer ASP.NET dinamico

In diverse applicazioni ho avuto la necessità di avere a disposizione un controllo a tab dinamico, ossia dove il caricamento dei vari tabs fosse delegato ad un preciso datasource.

La prima soluzione che ho provato è stata quella di utilizzare il TabContainer dell' AjaxControlToolkit e di caricarne i tabs da codice.

Premetto che il mio TabContainer deve stare dentro una FormView e che il content dinamico dei tab lo creo tramite un Repeater, spostando poi da codice il content di ogni RepeaterItem nel tab corretto.

Questa soluzione presenta l'unico, ma grosso problema, che durante i postbacks non viene mantenuto il viewstate del content di ciascun tab e quindi si perdono sia i valori in databind che la posizione del content all'interno dei tabs.

Non ho avuto tempo di indagare oltre e non ho trovato su internet riferimenti in merito, per cui ho deciso di sviluppare un controllo ASP.NET nuovo di zecca.

Piu che tante ed inutili parole, ecco qui il mark-up ASP.NET per usare questo controllo:

<My:SmartTabContainer runat="server" 

           ID="DemoTabContainer"

           UseAjaxToolkitStyles="true"
           CssClass="ajax__tab_technorati-theme"

           TabHeaderFieldName="..."
           DataSource='<%# LoadMyDataSource() %>'>
<TabTemplate>

   ... il content del tab ... quindi controlli asp.net con databinding, etc...
</TabTemplate>
</My:SmartTabContainer>

Due precisazioni. Primo l'attributo TabHeaderFieldName permette di specificare il nome dell'item nel datasource che corrisponde al titolo di ogni tab.

Secondo, con UseAjaxToolkitStyles, viene renderizzato esattamente con lo stesso html e classi di stile che usa il TabContaier dell' AjaxToolki, per cui diventa molto veloce e semplice riutilizzare i css già pronti di quest'ultimo per stilizzare il nostro.

Il controllo si potrebbe ulteriormente estendere ed arricchire, ma per il mio utilizzo attuale è più che sufficiente.Allego comunque qui i sorgenti nel caso a qualcuno serva o voglia lavorarci sopra.

Ed ecco dove scaricare i sorgenti

http://cid-afe524584547c4e6.skydrive.live.com/browse.aspx/NET%20Code

Print posted @ mercoledì 16 gennaio 2008 12:51