In questo articolo, verrà trattato come scegliere in maniera casuale la posizione all'interno della finestra del browser di una tabella di una colonna per una riga. L'immagine grafica della tabella in questione è la seguente:
Com'è possibile osservare, all'interno della cella viene indicata anche la posizione dello schermo in cui si trova l'immagine. Il primo valore corrisponde all'allineamento verticale(top, middle, bottom) all'interno di una tabella ed il secondo valore è riferito all'allineamento orizzontale (left, center, right). Quando ho eseguito lo script, la cella si trovava esattamente in posizione centrale nello schermo.
Ora cominciamo ad analizzare il codice asp.net (scritto tramite vb.net) presente all'interno della pagina e dopo averlo adeguatamente commentato, verrà illustrato il codice html che permette di mostrare a video l'elaborazione.
<%@page language="vb"%>
<script runat="server">
Sub page_load(obj As object, e As EventArgs )
'Attivo il randomize
randomize
'Dichiaro le variabili
Dim intCasuale As integer
Dim strPosizione As string=""
'Allineamento Verticale
intCasuale= cint ( (3-1)*Rnd + 1 )
Select Case intCasuale
Case 1:
strPosizione="top"
Case 2:
strPosizione="middle"
Case 3:
strPosizione="bottom"
End select
'Posiziono verticalmente
casella.valign=strPosizione
posizione.text=strPosizione
'Allineamento orizzontale
intCasuale= cint ( (3-1)*Rnd + 1 )
Select Case intCasuale
Case 1:
strPosizione="left"
Case 2:
strPosizione="center"
Case 3:
strPosizione="right"
End select
'Posiziono orizzontalmente
casella.align=strPosizione
posizione.text= posizione.text + " - " + strPosizione
End sub
</script>
Tutto il codice appena mostrato, è contenuto all'interno della subroutine che viene eseguita automaticamente all'avvio della pagina asp.net
Sub page_load(obj As object, e As EventArgs )
'Corpo della subroutine
End sub
La prima operazione svolta, all'interno della subroutine appena illustrata, è l'attivazione del generatore di numeri casuali:
'Attivo il generatore di numeri casuali
randomize
Grazie al generatore attivo, verrà calcolato due volte (in sedi separate) un numero casuale compreso tra uno e tre, convertito in intero e memorizzato in una variabile apposita.
intCasuale= cint ( (3-1)*Rnd + 1 )
Ogni volta che il valore appena descritto verrà calcolato, verrà esaminato in quanto i tre possibili risultati implica un posizionamento diverso sia per l'allineamento verticale (valign) e per l'allineamento orizzontale (align).
'Allineamento Verticale
Select Case intCasuale
Case 1:
strPosizione="top"
Case 2:
strPosizione="middle"
Case 3:
strPosizione="bottom"
End select
'Posiziono verticalmente
casella.valign=strPosizione
posizione.text=strPosizione
'Allineamento orizzontale
Select Case intCasuale
Case 1:
strPosizione="left"
Case 2:
strPosizione="center"
Case 3:
strPosizione="right"
End select
'Posiziono orizzontalmente
casella.align=strPosizione
posizione.text= posizione.text + " - " + strPosizione
Nel codice appena illustrato, sono state evidenziate in grassetto due parole nuove: casella e posizionamento. È proprio grazie a loro se possiamo "passare" il risultato dell'elaborazione appena svolta alla parte di codice html che ora illustro.
<body bgcolor="#FFFFFF" text="#000000"
leftmargin="10" topmargin="10" marginwidth="10"
marginheight="10">
<table width="100%" border="1" cellspacing="0"
cellpadding="0" height="100%" bordercolor="#66CCFF">
<tr>
<td id="casella" runat="server">
<table width="140" border="1" cellspacing="0"
cellpadding="0" bgcolor="#66CCFF" bordercolor="#FF0000">
<tr>
<td><div align="center"><asp:Label value=""
id="posizione" runat="server" /></div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Ad una prima lettura, il codice appena proposto, può risultare puro html, ma invece non è così. Infatti si vedono due righe dove compare un nuovo elemento: runat="server" grazie al quale si passa il controllo sull'elemento al server web che esegue la pagina aspx.
La prima riga:
<td id="casella" runat="server">
La seconda riga:
<asp:Label value="" id="posizione" runat="server"
/>
Come vi ho reso possibile notare, casella e posizione compaiono all'interno del codice html.
Nel codice vb.net, a casella vengono assegnati due valori distinti:
Valore per l'allineamento verticale
casella.valign=strPosizione
Valore per l'allineamento orizzontale
casella.align=strPosizione
Le modalità di come si ricavano questi due valori, sono appena state illustrate nella prima parte di quest'articolo.
Alla label posizione, viene assegnata, in fasi separate due stringhe di testo che indicano la posizione scelta dinamicamente.
Prima fase di inserimento:
posizione.text=strPosizione
Seconda fase di inserimento
posizione.text= posizione.text + " - " + strPosizione
Una volta eseguito lo script, il risultato prodotto a video sarà simile al seguente (il tutto dipende dai risultati elaborati nella parte di codice asp.net):
