ASP.NET: Html Server Controls e gli eventi

Corso ASP.NET: quarta puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

La vera novità di ASP.NET è la possibilità di utilizzare particolari tag che diventano controlli dotati di proprietà ed eventi.

Sono i Server Controls, una serie di controlli posti all’interno della pagina che consentono l’uso di un modello di programmazione ad oggetti.

Sono di due tipi:

  • Html Server Controls
  • Web Form Server Controls

Gli Html Server Controls sono il modo più veloce per costruire controlli lato server in ASP.NET. Sono dei controlli in corrispondenza 1:1 con i tag Html: è sufficiente aggiungere ad un normale tag l’attributo runat=”server” per promuoverlo a Html Server Control.

I tag Html che traggono il maggior beneficio dalla promozione a Html Server Controls sono quelli che hanno in qualche modo a che fare con le form (i campi e i bottoni di submit), anche se ogni tag Html può diventare un Html Server Control.

L’oggetto HtmlAnchor, ad esempio, consente di intervenire via codice sulle proprietà del tag <a> in due modi:

  • per definire un link “da seguire”
  • per gestire eventi con le form di tipo postback

Vediamolo con un esempio

L’oggetto HtmlAnchor

Provate [nuova finestra] l’esempio online, visualizzate il codice sorgente oppure scaricatelo per vedere la pagina sulla vostra macchina.

La pagina con due possibilità
Due possibilità: un link o una pagina in postback

La pagina consente due possibilità:

  • cliccare su un link: viene aperta una finestra in cui si carica l’Homepage di FucinaWeb.com
  • scatenare un evento in postback: cliccando viene eseguito il submit di una form di tipo PostBack

Nel secondo caso, la situazione che si presenta dopo il click è la seguente:

La stessa pagina con la scritta Bravo, hai cliccato!
Submit della pagina e comparsa della scritta “Bravo, hai cliccato!”

Il tag che genera il primo dei link è:

47     <a id="link" runat="server">
48       Home Page di FucinaWeb.com
49     </a>

Nell’evento Page_Load della pagina sono successivamente definiti il link, il title (che compare posizionando il mouse sopra il link) e il target come proprietà dell’oggetto:

17 Sub Page_Load(sender as Object, e as EventArgs)
18   link.HRef = "https://fucinaweb.com"
19   link.Title = "La pagina di ingresso di FucinaWeb.com"
20   link.Target = "_blank"
21 End Sub

Invece di “scomodare” l’evento Page_Load avremmo potuto scrivere direttamente:

<a id="link" href="https://fucinaweb.com" title="La pagina di ingresso di FucinaWeb.com" target="_blank" runat="server">Home Page di FucinaWeb.com</a>

L’evento Page_Load ci consente però di chiarire che “link” è davvero un oggetto con le sue proprietà a cui è possibile assegnare un valore.

La seconda parte dell’esempio è composta da un link che in realtà è responsabile del submit di una form.

Il codice del controllo è:

<a OnServerClick="linkevento_Click" runat="server" id="linkevento">…esempio di postback</a>

L’unica differenza rispetto al link precedente è data dalla presenza di un evento: OnServerClick che è scatenato al click dell’utente sul collegamento.

Va anche notata la presenza di una form di tipo PostBack all’interno della pagina.

Quello che si verifica è che:

  • l’utente preme il link
  • viene effettuato il submit della form di tipo PostBack
  • al secondo caricamento della pagina è eseguito il codice presente nella funzione linkevento_Click

Il codice della funzione linkevento_Click è particolarmente semplice:

23 Sub linkevento_Click(Source As Object, E as EventArgs)
24    risposta.InnerHtml = "Bravo, hai cliccato!"
25 End Sub

Ma come è possibile che premendo un link venga inviata una form?

Quando il server ASP.NET riconosce un controllo con runat=”server” lo traduce in codice html e script che il client è in grado di eseguire.

In questo caso, la presenza dell’evento OnServerClick fa si che il server ASP.NET generi del codice Javascript che viene eseguito al click dell’utente sul link.

Questo codice esegue semplicemente il submit della form di tipo PostBack.

Se guardiamo il codice sorgente della pagina che è inviata dal server al browser, ci accorgiamo che ha una forma del tipo:

<script language="javascript">
<!
  function __doPostBack(eventTarget, eventArgument) {
    var theform = document._ctl0;
    theform.__EVENTTARGET.value = eventTarget;
    theform.__EVENTARGUMENT.value = eventArgument;
    theform.submit();
  }
// —>
</script>

Anche il codice del link ha una forma leggermente diversa:

<a id="linkevento" href="javascript:__doPostBack(‘linkevento’,”)">…esempio di postback</a>

È facile intuire che al click del link si scatena un evento Javascript lato client che provoca a sua volta il submit della form.

È chiaro una volta di più come ASP.NET consenta al programmatore di usare oggetti, proprietà ed eventi quando in realtà nulla cambia per il browser, che riceve codice Html puro e codice Javascript.

Conclusione

Gli Html Server Controls sono dei semplici controlli Html che per lo sviluppatore si trasformano in oggetti dotati di proprietà ed eventi. Sono un comodo aiuto per gestire via codice il comportamento dei tag e simulare gli ambienti di programmazione tradizionale. Il server ASP.NET si preoccupa di riconoscere i controlli all’interno della pagina e di restituire al browser del puro codice Html.

Far navigare il visitatore

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Le pagine interne – L’impaginazione più adatta ai vostri siti

Un’impaginazione semplice ed esaustiva è una delle regole principali per essere visitati da un gran numero di utenti.

E’ nelle pagine interne che dobbiamo soddisfare le esigenze di informazione, perciò il layout deve tener conto della tipologia di contenuti definendo la presentazione e la navigazione.

Qualche esempio

  • Un sito di medicina dovrà presentare i contenuti attraverso immagini e disegni, imagemap e schede di approfondimento, magari con il consiglio di un esperto, una scheda farmacologia e un video – impaginazione con grandi immagini accompagnate da didascalie, schede e file multimediali.
  • Un sito di e-commerce dovrà contenere immagini dei prodotti, schede comparative e schede tecniche del prodotto, oltre alla pagina di acquisto – impaginazione con grandi immagini, molto spazio alle informazioni tecniche, che devono essere dettagliate e complete.
  • Un sito di poesia conterrà molto testo, contenuti lunghi e schede biografiche e un servizio di informazione e recensione sulle novità bibliografiche – impaginazione per testi lunghi (nelle dimensioni accettabili dal web), commenti e ipertesto.

Ogni tipo di contenuto richiede un’impaginazione specifica per facilitare la navigazione e l’informazione del visitatore.

L’utente può entrare nel sito senza passare per la home. Per questo in tutte le pagine ci devono essere logo e nome del sito, la funzione di ricerca e la directory di navigazione.

Il layout – Ogni spazio ha la sua funzione

La maggior parte dei siti ha la directory di navigazione in verticale sul lato sinistro dello schermo, il logo e il nome del sito in alto e il contenuto al centro.

Questo tipo d’impaginazione è la più diffusa, poiché si è dimostrata la più usabile dall’utente. Egli infatti comincia a leggere dall’alto, dove trova il nome del sito, e da sinistra (nel mondo occidentale) dove sono presenti i bottoni della navigazione e la maggior parte dello spazio viene lasciato alle informazioni.

Fucinaweb ha la directory di navigazione a destra per dare più rilievo ai contenuti e perché sfrutta un layout liquido, ma l’aspetto è identico in tutte le pagine e lo sfondo della directory distingue nettamente la parte di navigazione (sfondo nero) da quella dei contenuti (sfondo bianco).

L’utente ha imparato a navigare ancorandosi a questa tipologia di layout (layout a tre pannelli) e presentare un sito con un’impaginazione molto diversa lo costringe ad imparare una nuova navigazione con tempo e pazienza.

Fatelo se volete essere creativi ed innovativi, ma tenete conto del pubblico a cui vi rivolgete, come si è detto nella prima parte del corso.

Le tabelle – L’impaginazione a larghezza fissa e il design liquido

L’impaginazione viene costruita attraverso le tabelle HTML: la maniera più semplice per organizzare tutti gli elementi di una pagina web.

Il layout a tre pannelli è una tabella con tre celle principali: una per il contenuto, una per la navigazione e una per il logo.

Larghezza fissa

Ignoriamo il browser o le opzioni scelte dall’utente per la visualizzazione della pagina Web e la tabella di layout può subire delle modifiche rispetto al progetto iniziale: si allarga o si restringe a seconda delle dimensioni del browser, modificando l’impaginazione e l’aspetto.

Per mantenere la pagina fedele al progetto iniziale si costruisce una tabella a larghezza fissa:

  1. definire la larghezza delle celle con valori assoluti, cosicché la cella non si deformerà allargandosi troppo
  2. per impedire che la cella si riduca, inserire un’immagine invisibile della stessa larghezza della cella, in ogni cella della tabella <img width="lunghezza_desiderata" height="1" alt="" src="trasparente.gif">
  3. la tabella deve essere sempre impostata con BORDER=”0″ nel tag TABLE

Liquid Design

Una tabella a larghezza fissa è la più semplice per realizzare il layout, ma se si vuole che l’impaginazioni cambi secondo la dimensione del browser allora dovete affrontare il design liquido (Liquid Design). Lo consigliamo vivamente perché facilita la lettura a video, evitando lo scrolling orizzontale. È inoltre fondamentale nella realizzazione di siti accessibili.

Provate a modificare le dimensioni del vostro browser, vedrete come si modifica l’impaginazione di Fucinaweb.

La costruzione con layout liquido è sicuramente più impegnativa rispetto a quella fissa: avrete meno controllo sulla presentazione, ma guadagnerete in visibilità e audience.

Le metafore – I simboli per il friendly web

Le metafore sono un modo diverso di far capire la funzionalità e il contenuto di un sito attraverso simboli e immagini, che rendono il web più familiare. Le metafore possono essere molto utili per il visitatore che può capire in breve tempo il sito e navigare facilmente.

Semplicità e familiarità sono i criteri principali per l’uso delle metafore, devono cioè appartenere al mondo familiare e conosciuto dell’utente, altrimenti si costringe il visitatore ad imparare il messaggio delle metafore per capire il sito.

Gli esempi più diffusi di metafore sono il simbolo del carrello della spesa per indicare e-commerce e quello della busta per l’email: attenzione quindi ai simboli più usati nel web, perché sono i più riconoscibili dagli utenti.

ASP.NET: Server Roundtrip e ViewState – Codice sorgente dell’esempio

Sorgenti: viewState.aspx

Scarica i sorgenti: aspnet03.zip

Articolo a cui si riferisce il codice: ASP.NET: Server Roundtrip e ViewState

viewState.aspx – Prova l’esempio [nuova finestra]

  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: ViewState.aspx
  9 # scritto da: Antonio Volpon
 10 # data creazione: 22 Novembre 2001
 11 # ultima modifica: 22 Novembre 2001
 12 # copyright: Antonio Volpon
 13 >
 14 
 15 <script language="vb" runat="server">
 16 Sub Page_Load(sender as Object, e as EventArgs)
 17   
 18   If ViewState("colore") = "<font color=‘red’><b>Rosso</b></font>" Then
 19     colore.InnerHtml = "<font color=‘black’><b>Nero</b></font>"
 20     ViewState("colore") = "<font color=‘black’><b>Nero</b></font>"
 21   Else
 22     colore.InnerHtml = "<font color=‘red’><b>Rosso</b></font>"  
 23     ViewState("colore") = "<font color=‘red’><b>Rosso</b></font>"
 24   End If
 25   
 26   If IsNothing(ViewState("count")) Then
 27     ViewState("count") = 1            
 28   Else
 29     ViewState("count") += 1
 30   End If
 31   
 32 End Sub
 33 </script>
 34 
 35 <html>
 36   <head>
 37     <link rel="stylesheet" href="css/aspnet.css" type="text/css">
 38     </link>
 39     <title>ViewState</title>
 40   </head>
 41   <body>
 42   
 43     <div class="titolo">
 44       ViewState
 45     </div>
 46     
 47     <hr noshade="true" size="1" width="100%">
 48 
 49     <center>    
 50     
 51     <div id="colore" runat="server" class="risposta"></div>
 52     
 53     <br /><br />
 54     <span class="txt">Il contatore segna <span id="contatore" runat="server" class="txtb"><%=ViewState("count")%></span> volte.</span>
 55     
 56     <form runat="server">
 57       <input type="submit" value="Riprova">
 58     </form>
 59 
 60     </center>
 61 
 62  <ANet:Footer id="Menu" runat="server" />
 63     
 64   </body>
 65 </html>
 66   
 67