Durante la creazione di form è spesso necessario implementare un meccanismo che consenta di avvisare l'utente che i dati nella form sono cambiati ed è quindi necessario procedere al salvataggio.
Questo succede per esempio quando ho form complesse fatte a tab ed il passaggio da un tab all'altro presuppone che un messaggio avvisi l'utente che ci sono dei campi variati nel tab che si sta abbandonando ed è quindi necessario aggiornarlo.
Ipotizziamo uno scenario in cui utilizziamo ASP.NET ed Ajax dove avremo un UpdatePanel con al suo interno il TabContainer dell' AjaxControlToolkit. Ogni TabContainer conterrà la propria FormView con tutti i controlli di input necessari:
...
<ajaxToolkit:TabContainer runat="server" ID="TabContainerControl" OnClientActiveTabChanged="clientActiveTabChanged">
<ajaxToolkit:TabPanel ID="Tab1" runat="server" HeaderText="Tab 1">
<ContentTemplate>
<div id="Tab1">
<!--...ascx, formview, ...-->
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
...
Prima di tutto agganciamo l'evento client OnClientActiveTabChanged del TabContainer ad una funzione javascript dove:
1) verificherò che qualcosa nel tab da cui provengo è cambiato
2) se ci sono dati variati e l'utente conferma, aggiorno il tab da cui provengo
function clientActiveTabChanged(sender, args) {
var activeIndex = sender.get_activeTabIndex();
if (tabChanged) {
if (window.confirm('Sono stati modificati dei dati.Prima di passare alla sezione successiva è necessario salvare le modifiche.\n\nClicca \'OK\' per procedere con il salvataggio.')) {
__doUpdateTab(exActiveIndex);
}
}
tabChanged = false;
exActiveIndex = activeIndex;
}
La funzione __doUpdateTab si occupa di effettuare una chiamata di tipo postback dove verrà gestito, lato server, l'aggiornamento del tab.La variabile javascript tabChanged indica se ci sono state modifiche in un tab.
La cosa interessante ed anche la più importante di tutto il post è l'utilizzo di JQuery per generare velocemente gli eventi di notifica su tutti i controlli di tipo input per ciascun tab:
jQuery(document).ready(
function() {
jQuery('#Tab1 :input').bind('change',
function(event) {
tabChanged = true;
});
});
Con queste poche righe di javascript, utilizzando JQuery, abbiamo agganciato l'evento client di change su tutti i controlli di tipo input che ci sono all'interno di un div che ha per id Tab1, che nel nostro caso corrisponde al div contenitore del primo TabPanel.
IMPORTANTE: se si usa tutto quando descritto all'interno di un UpdatePanel(per esempio posizionato all'interno di una master page) succede che dopo un qualsiasi postback il javascript relativo agli eventi di change non risponde più. E' quindi necessario registrare tutti i javascripts sopra direttamente da codice, utilizzando le procedure corrette.
NB. ho preso spunto da questo post di Rick Strahl.