Archivio mensile:Febbraio 2002

ASP.NET: Mantenere lo stato – Codice sorgente dell’esempio

Pubblicato il da

Sorgenti: pageLoad.aspx – pageLoadCheck.ascx – footer.ascx

Scarica i sorgenti: aspnet02.zip

Articolo a cui si riferisce il codice: ASP.NET: Mantenere lo stato

pageLoad.aspx

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 
  4 <%@Page Language="VB"%>
  5 <%@Register TagPrefix="ANet" TagName="Footer" Src="includes/footer.ascx"%>
  6 
  7 <!—
  8 # nome: pageLoad.aspx
  9 # scritto da: Antonio Volpon
 10 # data creazione: 21 Ottobre 2001
 11 # ultima modifica: 21 Ottobre 2001
 12 # copyright: Antonio Volpon
 13 —>
 14 <script language="vb" runat="server">
 15 Sub Page_Load(sender as Object, e as EventArgs)
 16 ‘ Visualizza il contenuto dell’ input box
 17 risposta.innerHTML = "Piacere di conoscerti " + txtNome.value
 18 End Sub
 19 </script>
 20 
 21 <html>
 22   <head>
 23     <link rel="stylesheet" href="css/aspnet.css" type="text/css">
 24     </link>
 25     <title>L’evento Page_Load</title>
 26   </head>
 27   <body>
 28     <div class="titolo">
 29       L’evento Page_Load
 30     </div>
 31     <hr noshade="true" size="1" width="100%" />
 32     <form runat="server">
 33       <table align="center">
 34         <tr>
 35           <td>
 36             Inserisci il tuo nome:
 37           </td>
 38           <td>
 39             <input type="text" id="txtNome" name="txtNome" size="20" runat="server" />
 40           </td>
 41         </tr>
 42         <tr>
 43           <td colspan="2" align="right">
 44             <input type="submit" id="btnSubmit" value="Invia" />
 45           </td>
 46         </tr>
 47       </table>
 48       <div class="risposta" id="risposta" runat="server">
 49       </div>
 50     </form>
 51  <ANet:Footer id="Menu" runat="server" />
 52   </body>
 53 </html>

pageLoadCheck.aspx

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 
  4 <%@Page Language="VB"%>
  5 <%@Register TagPrefix="ANet" TagName="Footer" Src="includes/footer.ascx"%>
  6 
  7 <!—
  8 # nome: pageLoadCheck.aspx
  9 # scritto da: Antonio Volpon
 10 # data creazione: 21 Ottobre 2001
 11 # ultima modifica: 21 Ottobre 2001
 12 # copyright: Antonio Volpon
 13 —>
 14 <script language="vb" runat="server">
 15 Sub Page_Load(sender as Object, e as EventArgs)
 16 ‘ Visualizza il contenuto dell’ input box se presente un valore
 17 if Page.IsPostBack then
 18   risposta.innerHTML = "Piacere di conoscerti " + txtNome.value
 19 else
 20   risposta.innerHTML = ""
 21 end if
 22 End Sub
 23 </script>
 24 
 25 <html>
 26   <head>
 27     <link rel="stylesheet" href="css/aspnet.css" type="text/css">
 28     </link>
 29     <title>L’evento Page_Load con controllo</title>
 30   </head>
 31   <body>
 32     <div class="titolo">
 33       L’evento Page_Load con controllo
 34     </div>
 35     <hr noshade="true" size="1" width="100%">
 36     <form runat="server">
 37       <table align="center">
 38         <tr>
 39           <td>
 40             Inserisci il tuo nome:
 41           </td>
 42           <td>
 43             <input type="text" id="txtNome" name="txtNome" size="20" runat="server">
 44           </td>
 45         </tr>
 46         <tr>
 47           <td colspan="2" align="right">
 48             <input type="submit" id="btnSubmit" value="Invia">
 49           </td>
 50         </tr>
 51       </table>
 52       <div class="risposta" id="risposta" runat="server">
 53       </div>
 54     </form>
 55  <ANet:Footer id="Menu" runat="server" />
 56   </body>
 57 </html>

footer.aspx

  1 <hr noshade="true" size="1" width="100%">
  2 <div class="footer">
  3 Questo esempio fa parte di un corso gratuito di ASP.NET realizzato da <a href="https://fucinaweb.com/" title="FucinaWeb.com: articoli, corsi e risorse per forgiare siti">FucinaWeb.com</a>.
  4 </div>
  5 <div class="footer">
  6 Copyright&copy; 2001-2002 Antonio Volpon – <a href="mailto:[email protected]">[email protected]</a>
  7 </div>
  8 

ASP.NET: Mantenere lo stato – L’evento Page Load e i form Postback

Pubblicato il da

Corso ASP.NET: seconda puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

Le pagine ASP.NET sono un’istanza della classe Page, da cui ereditano alcuni eventi.

Tra tutti gli eventi, il più usato è Page_Load. È il posto ideale in cui inserire codice che deve comunque essere eseguito ad ogni caricamento della pagina, o una volta che i dati sono stati inviati usando una form.

In generale, in ASP.NET un evento è racchiuso tra tag , in funzioni che portano il nome dell’evento stesso.

Esempio con l’evento Page_Load

Visualizzate il codice sorgente oppure scaricatelo per vedere la pagina sulla vostra macchina.

La pagina si limita a visualizzare una form con un campo da compilare:

Pagina con form e input box
Richiede il nome dell’utente

Notate come compaia la scritta “Piacere di conoscerti” anche se ancora non abbiamo inserito proprio niente. Non preoccupatevi: vedremo tra un attimo come toglierla.

Se inseriamo il nostro nome e inviamo i dati, la situazione diventa la seguente:

La pagina visualizza il nome e cognome dell'utente
Visualizza il messaggio di benvenuto

La pagina non compie nessuna operazione eccezionale: quello che è interessante andare a vedere è il codice sorgente:

32 < form runat=”server”>
33 < table align=”center”>
34 < tr>
35 < td>
36 Inserisci il tuo nome:
37 td>
38 < td>
39 < input type=”text” id=”txtNome” name=”txtNome” size=”20″ runat=”server” />
40 td>
41 tr>
42 < tr>
43 < td colspan=”2″ align=”right”>
44 < input type=”submit” id=”btnSubmit” value=”Invia” />
45 td>
46 tr>
47 table>
48 < div class=”risposta” id=”risposta” runat=”server”>
49 div>

Qui viene composta la form con l’input box e il pulsante di invio.

Va notato che l’input box è di tipo server. Sarà necessario infatti leggerne il valore da codice.

Infine, è presente un controllo “div” che visualizza il messaggio di benvenuto.

Ecco adesso il codice che “comanda” la visualizzazione del messaggio:

14 < script language=”vb” runat=”server”>
15 Sub Page_Load(sender as Object, e as EventArgs)
16 ‘ Visualizza il contenuto dell’ input box
17 risposta.innerHTML = “Piacere di conoscerti ” + txtNome.value
18 End Sub
19 script>

Quando la pagina è caricata, viene estratto il valore dell’inpot box ed associato al tag “div” che contiene il benvenuto, utilizzando la proprietà innerHtml.

La proprietà isPostBack

Non vogliamo che il messaggio compaia al primo caricamento della pagina. Per questo motivo è utile utilizzare la proprietà IsPostBack dell’oggetto Page: restituisce True se è stata compilata e inviata la form presente nella pagina.

Ecco il codice della pagina modificata (PageLoadCheck.aspx):

14 < script language=”vb” runat=”server”>
15 Sub Page_Load(sender as Object, e as EventArgs)
16 ‘ Visualizza il contenuto dell’ input box se presente un valore
17 if Page.IsPostBack then
18 risposta.innerHTML = “Piacere di conoscerti ” + txtNome.value
19 else
20 risposta.innerHTML = “”
21 end if
22 End Sub
23 script>

Form Postback

Se la form che inseriamo nel codice ASP.NET contiene l’attributo runat=”server”, il valore dei campi viene mantenuto una volta inviata la pagina. Questo tipo di form prende il nome di Form PostBack ed è usato per simulare un meccanismo di stato all’interno delle pagine ASP.NET

Non è più necessario inserire campi nascosti o passare il valore dei campi all’interno della QueryString. Il loro valore è mantenuto direttamente da ASP.NET. Nessuna magia, comunque: se andate a controllare il codice sorgente della pagina inviata al browser noterete che in realtà quello che è spedito al cient è proprio un campo nascosto.

Conclusione

L’utilizzo efficace delle Form PostBack consente di:

  • Ridurre il codice necessario per simulare gli stati
  • Verificare velocemente se la form è stata compilata e inviata
  • Isolare il codice dal documento Html

Xhtml o Html: quale scegliere?

Pubblicato il da

Che siate un designer, un htmlista o un editor vi trovate nella condizione di scegliere tra due standard per scrivere i vostri articoli o creare i vostri template.

Da un lato il “collaudato” Html, che pur con tutti i limiti vi consente di creare pagine più o meno visibili in tutte le piattaforme.

Dall’altro Xhml, uno standard abbastanza recente e che promette di sostituire Html nel prossimo futuro.

Perché usare Xhtml
  • È compatibile con tutti i browser, non solo con i più recenti
  • Comincia ad essere supportato dagli ambienti per la creazione di codice Html (es. Macromedia Homesite 5.0)
  • È lo standard del futuro che sostituirà Html
  • Trova il suo massimo impiego insieme ai CSS (Cascading Style Sheet), standard ormai collaudato
Vantaggi nell’uso di Xhtml
  • Usato insieme ai CSS, separa lo strato di presentazione della pagina dal contenuto, rendendo il codice facilmente manutenibile e i dati riutilizzabili
  • Potreste in futuro essere costretti a convertire il vostro codice Html in Xhtml se usate XML e XSL per pubblicare i vostri articoli
  • È possibile estendere il linguaggio con moduli da usare con particolari dispositivi o, viceversa, limitare il numero di tag da usare (Xhtml Modularization)
Tipi di documento Xhtml

Esistono 3 tipi di documento Xhtml:

  • Strict: la versione con meno libertà. Va usata in combinazione ad un uso avanzato dei CSS, im modo da posizionare gli elementi all’interno della pagina. Per questo è sfronda l’Html degli attributi di posizionamento
  • Transitional: all’oggi il preferibile. Vi consente di trasformare il vostro documento Html in Xhtml con semplici correzioni (tipicamente la chiusura del tag per quei tag che non la prevedono)
  • Frameset: usato nel caso la vostra pagina sia costruita a frame
Come si scrive un documento Xhtml

Per scrivere un documento Xhtml valido è necessario che:

  • Tutti i tag Html siano chiusi
  • I tag siano scritti in minuscolo
  • Sia presente una direttiva in testa al documento che ne indichi il tipo

Convertiamo allora un semplice esempio Html nel corrispettivo Xhtml di tipo Transitional. Si tratta di una pagina contenente un’immagine ed una form:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 
 3 <html>
 4 <head>
 5   <title>Da Html a Xhtml</title>
 6 </head>
 7 
 8 <body>
 9 
10 <img src="logo.gif" width="50" height="50" alt="FucinaWeb.com">
11 
12 <form action="risultato.asp">
13   Nome: <input type="text" name="Nome" checked><br>
14   Cognome: <input type="text" name="Cognome"><br>
15   Sesso:
16   Maschio <input type="radio" name="Sesso" value="M">
17   Femmina <input type="radio" name="Sesso" value="F">
18 </form>
19 
20 </body>
21 </html>

I cambiamenti interessano i seguenti tag:

  • <img> Va terminato, essendo un tag non chiuso. Per farlo, è possibile inserire esplicitamente un tag di chiusura, come </img>.
    Esiste una seconda possibilità, che abbiamo adottato in questo caso: chiudere il tag di apertura completandolo con ” />”. È necessario
    ricordarsi di inserire uno spazio prima della barra “/” per evitare problemi di visualizzazione in browser di vecchia generazione.
  • <br> Vale lo stesso discorso del tag precedente.
  • <input> Vale lo stesso discorso del tag precedente. In più, va notato che ad un attributo deve sempre essere associato un valore. Nel caso di input box di tipo radio è possibile specificare il valore di default con l’attributo checked, senza associare un valore esplicito.
    In Xhtml, ad ogni attributo deve essere associato un valore, in questo caso checked=”checked”

In più, va cambiata la dichiarazione del documento, che diventa quella di un documento Xhtml.

Ecco l’esempio trasformato in Xhtml:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html>
 4 <head>
 5   <title>Da Html a Xhtml</title>
 6 </head>
 7 
 8 <body>
 9 
10 <img src="logo.gif" width="50" height="50" alt="FucinaWeb.com" />
11 
12 <form action="risultato.asp">
13   Nome: <input type="text" name="Nome" /><br />
14   Cognome: <input type="text" name="Cognome" /><br />
15   Sesso:
16   Maschio <input type="radio" name="Sesso" value="M" checked="checked" />
17   Femmina <input type="radio" name="Sesso" value="F" />
18 </form>
19 
20 </body>
21 </html>

Il documento è ora compatibile con lo standard Xhtml.

Conclusione

La conversione di un documento Html in Xhtml (soprattutto di tipo Transitional) è semplice e richiede poche attenzioni e nessuna nuova tecnica da imparare.
Questo, unito ai vantaggi in termini di aderenza agli standard e di separazione tra struttura e contenuto fa si che lo standard Xhtml sia la scelta
ideale per qualsiasi nuovo progetto da portare sul Web.