Scarica l'esempio (VB.NET e C#)
Una delle necessità più frequenti nello sviluppo di applicazioni è
quello di fornire dei messaggi all'utente, per segnalargli che qualcosa
non sta andando bene, oppure magari per chiedergli semplicemente una
conferma dell'azione che ha richiesto.
In questo articolo vedremo quindi come si possono ottenere questi
effetti nelle nostre Web Forms ASP.NET, semplicemente scrivendo qualche
riga di codice.
Come ben sappiamo, le Web Forms sono costituite da pezzi di codice che
girano sul server, e che rispondono agli eventi scatenati sul client e
mandati al server tramite le postback, ma anche dall'output inviato al
client, che è semplice HTML.
Per poter visualizzare delle MessageBox sullo schermo del pc
dell'utente della Web Form, non potremo quindi avvalerci del codice
lato server (il quale genererebbe dei messaggi sul pc server, non
visibili quindi dal client). Quello che ho appena scritto, però, non è
del tutto vero. Infatti possiamo sfruttare benissimo il codice
server-side, per far generare dell'output HTML misto a JavaScript, che
lanciato sul browser client riuscirebbe a scatenare dei messaggi di
tipo MessageBox.
Con ASP.NET esistono principalmente tre modi per generare come output del codice JavaScript da eseguire sul client:
- scrivere manualmente il blocco di codice JavaScript nel codice HTML del file di template (con estensione .aspx);
- utilizzare il metodo Page.RegisterClientScriptBlock, per registrare un
blocco di codice JavaScript contenente una funzione da richiamare ad un
determinato evento client;
- utilizzare il metodo Page.RegisterStartupScript, per mandare al browser
del codice JavaScript da eseguire immediatamente al caricamento della
Web Form sul client.
Analizzeremo gli ultimi due casi, tralasciando il primo, che non è una
novità delle Web Forms. Per poter meglio spiegare il funzionamento dei
suddetti due metodi, ho preparato un progetto web di esempio (di cui
troverete anche la versione dell'esempio scritta in VB.NET, oltre che
in C#!), che potete scaricare come allegato all'articolo, ed esaminare
con calma sul vostro PC.
L'obiettivo finale di questo articolo è quello di riuscire a creare una
Web Form con un tasto per l'eliminazione di un ipotetico record di un
database. Alla pressione del tasto verrà scatenato del codice server
che si occuperà dell'eliminazione del record, ma vogliamo che prima di
effettuare la postback sul server venga visualizzato un messaggio sul
client con la richiesta di conferma. Se l'utente premerà su "OK",
allora avverrà la postback e verrà quindi eseguito il codice server
collegato all'evento click del button. Se invece l'utente avrà premuto
per sbaglio il bottone per eliminare il record, e quindi nel messaggio
di conferma premerà "Annulla", la postback verrà annullata, e non verrà
eseguita quindi nessuna operazione sul server.
Vediamo, con l'aiuto di alcune screenshots, quale sarà il risultato finale:
1. Ecco la nostra Web Form con il button per eliminare il record.
2. L'utente ha fatto click sul button "Elimina record", e gli viene quindi
richiesto di confermare o annullare l'operazione
3a. E' stato scelto di annullare l'operazione, quindi niente viene inviato al
server.
3b. L'utente ha scelto di confermare l'operazione premendo su "OK". In questo
caso la postback è stata inviata al server, che ha eseguito la porzione di
codice per eliminare il record.
Il metodo RegisterClientScriptBlock.
Esaminiamo quindi il codice della Web Form "confirmAlert.aspx", per vedere come
implementare quanto detto ed illustrato sopra.
Nel Page_Load della Web
Form andiamo subito ad utilizzare uno dei due metodi citati, e cioè
RegisterClientScriptBlock:
private void Page_Load(object sender, System.EventArgs e)
{
//.
string buffScriptString = "";
Page.RegisterClientScriptBlock("doConfirm", buffScriptString);
//.
btnDelete.Attributes["onclick"] = "return __doConfirm(this);";
}
Con queste tre righe di codice stiamo impostando il codice JavaScript
da eseguire alla pressione del bottone lato client, per far apparire la
finestrella con la conferma.
Per prima cosa viene creata una stringa, in cui viene memorizzato il
codice JavaScript contenente la funzione che visualizza la conferma, da
inviare al client.
La stringa viene poi passata al metoto RegisterClientScriptBlock della
classe Page, che si occupa di inserire nel buffer della response, da
inviare al client, la nostra funzioncina JavaScript.
A questo punto non si deve far altro che aggiungere la chiamata alla
funzione client alla pressione del bottone, impostandone opportunamente
l'attributo "onclick" dell'output HTML quando lo stesso verrà
"renderizzato" sul client.
L'output sul client, dato dalla prima esecuzione della Web Form, sarà qualcosa di questo tipo:
Come potete notare infatti abbiamo il blocco di script lato client
(evidenziato da un cerchio rosso), e l'attributo "onclick" del button
(segnalato dalla freccia rossa) che richiama la funzione client
"__doConfirm".
Il metodo RegisterStartupScript.
Adesso andiamo a vedere il codice da eseguire lato server, come evento click del
button:
private void btnDelete_Click(object sender, System.EventArgs e)
{
//. implementare il codice per eliminare il record
Response.Write("
Ho eseguito
il pezzo di codice server per eliminare il record...");
showClientMessageBox("Il record è stato eliminato.");
}
private void showClientMessageBox(string message)
{
//.
string buffScriptString = "";
Page.RegisterStartupScript("doMessage", buffScriptString);
//.
}
Dentro il gestore di evento click faccio una Response.Write, per
dimostrare che l'esecuzione lato server è avvenuta, dopodichè richiamo
una routine helper che mi sono scritto apposta. Dentro questa routine
viene creata un'altra stringa contenente il codice JavaScript che
voglio eseguire quando l'output html verrà caricato sul browser, e cioè
il codice che mi permette di visualizzare un Alert sul client con il
messaggio desiderato.
Quindi passo la stringa al metodo RegisterStartupScript, il quale si
occuperà di inserire, nel flusso dell'output da mandare al client, il
mio codice JavaScript da eseguire al caricamento della pagina sul
browser.
Questa volta l'output html inviato al client avrà questo aspetto:
L'output HTML con lo script JS per visualizzare la notifica.
Il blocco di codice JavaScript con l'istruzione alert() per
visualizzare un messaggio al caricamento (segnalato dalla freccia), e
l'output della Response.Write eseguita dentro il gestore delll'evento
click lato server (evidenziato dal cerchio rosso).
Conclusioni.
Abbiamo visto quindi come è facile integrare codice server e
codice client, grazie al supporto di questi due metodi della classe
Page, per fornire maggiore funzionalità ed interattività alle nostre
Web Forms ASP.NET.
Nel progetto di esempio che trovate allegato all'articolo troverete anche lo stesso esempio scritto in VB.NET !!
Alla prossima!
posted on giovedì 26 maggio 2005 23.04
by
Stefano Giannone