Creazione di una pagina Web Form con Web control

In questa procedura dettagliata viene illustrato come creareuna pagina Web Form. Verrà mostrato come aggiungerecontrolli alla pagina e creare codice per i controlli cheverranno eseguiti sul server. Di seguito sono elencate leattività illustrate nella procedura dettagliata:

Creazione di una nuova pagina Web Form.
Aggiunta di controlli e di testo HTML statico alla pagina.
Creazione di un gestore eventi per il controllo.
Generazione ed esecuzione della pagina Web Form.

Al termine, la pagina Web Form risulterà analoga allaseguente:

Creazione di progetti e form

Il primo passaggio consiste nel creare un'applicazioneWeb e una pagina Web Form.

Per creare il progetto e il form

Dal menu File scegliere Nuovo, quindi Progetto.
Nella finestra di dialogo Nuovo progetto effettuare le seguenti operazioni:
1. Nel riquadro Tipi progetto scegliereProgetti di Visual Basic oProgetti di Visual C#.
2. Nel riquadro Modelli scegliereApplicazione Web ASP .NET.
3. Nella casella Percorso immetterel'URL completo per l'applicazione, comprensivodi http://, del nome del server e del nome delprogetto. È necessario che nel server Web sianoinstallati IIS versione 5 o successiva e .NETFramework. Se nel computer è installato IIS,è possibile specificare http://localhost per ilserver. Se solitamente si accede a Internet utilizzandoun server proxy, è possibile che occorraconfigurare Internet Explorer in modo da ignorarlo perpoter utilizzare localhost.
  
  Suggerimento Se è già presente una soluzione aperta, scegliere Chiudi soluzione in modo da includere il nuovo progetto Web Form in una soluzione specifica.
Scegliendo OK verrà creato un nuovo progetto Web Form nella directory principale del server Web specificato. Verrà inoltre visualizzata una nuova pagina Web Form, denominata WebForm1.aspx, nella finestra di progettazione Web Form in visualizzazione Progettazione.

Analisi della struttura dei Web Form

Di seguito vengono descritte la struttura delle pagine WebForm e la disposizione di Progettazione Web Form. InProgettazione Web Form è visualizzato un filedenominato WebForm1.aspx. Una pagina Web Form consiste di duefile separati:

Il file ASPX, contenente il testo HTML e i controlli necessari per creare l'interfaccia utente della pagina.
Un secondo file, denominato WebForm1.aspx.vb oppure WebForm1.aspx.cs, a seconda della lingua specificata per il progetto, contenente il codice della pagina, ovvero il file di classe della pagina. Questo file è a volte definito file del "codice sottostante". In base all'impostazione predefinita, in Esplora soluzioni non viene visualizzato il file di classe della pagina.

Per visualizzare il file di classe di una pagina inEsplora soluzioni

Fare clic sul pulsante Mostra tutti i file sulla barra degli strumenti di Esplora soluzioni, quindi espandere il nodo relativo a WebForm1.aspx.

Nella parte inferiore di Progettazione Web Form sono presentidue schede, Progettazione eHTML, che consentono di visualizzare in mododiverso il file ASPX che si sta utilizzando:

Nella visualizzazione Progettazione il file viene visualizzato come WYSIWYG ed è possibile trascinare i controlli e configurarli utilizzando la finestra Proprietà.
Nella visualizzazione HTML vengono visualizzate le stesse informazioni, ma in formato non elaborato di file HTML. Come per i file HTML, in Progettazione Web Form è supportato Intellisense per gli elementi in visualizzazione HTML.

È possibile utilizzare entrambe le visualizzazioni.Passando da una modalità all'altra, ognivisualizzazione viene aggiornata con le modifiche apportatenell'altra. Di seguito verrà illustratol'utilizzo dell'editor di codice per scrivere ilcodice per il file di classe della pagina (ASPX.VB oASPX.CS).

Aggiunta di controlli e di testo

A questo punto è possibile aggiungere controlli etesto alla pagina.

Modalità griglia omodalità flusso.

In base all'impostazione predefinita, la pagina Web Formè in modalità layout griglia. In questamodalità è possibile trascinare i controllinella pagina e posizionarli mediante coordinate assolute (x ey). Con i browser di livello inferiore i controlli vengonoposizionati tramite tabelle.

In alternativa, è possibile utilizzare lamodalità layout di flusso, nella quale gli elementisono posizionati dall'alto verso il basso come in unapagina HTML tradizionale. Ognuna delle due visualizzazionioffre dei vantaggi: in modalità griglia èpiù semplice posizionare gli elementi, mentre inmodalità flusso è più sempliceaggiungere testo statico.

In questa procedura dettagliata verrà utilizzata lamodalità griglia e verrà illustrato comeposizionare testo statico in questa modalità.

Aggiunta di controlli alla pagina Web Form

I controlli Web Form sono detti "controlli server"perché durante l'esecuzione della pagina vienecreata un'istanza dei controlli in codice lato server,come parte della classe della pagina. Quando gli utentiinteragiscono con i controlli, ad esempio facendo clic su uncontrollo pulsante di Web Form, il codice associato vieneeseguito sul server dopo che la pagina è statainviata. È possibile utilizzare il codice lato serverper scrivere gestori eventi per i controlli server,impostarne le proprietà e così via.

Non tutti gli elementi di una pagina Web Form sono controlliserver. In base all'impostazione predefinita, ad esempio,il testo statico HTML non è un controllo server e nonpuò quindi essere controllato tramite il codice latoserver. Anche i controlli HTML standard, ad esempio unpulsante di invio HTML, non sono controlli server perimpostazione predefinita e non sono quindi visibili comecontrolli di prima classe nel codice lato server. Glielementi HTML possono essere programmati con script client,come in una qualsiasi pagina HTML.

Per questo motivo, se si desidera utilizzare i controlli inuna pagina Web Form, è necessario aggiungerli comecontrolli server. Esistono due tipi di controlli server:

Controlli server HTML Elementi HTML convertiti in modo da poter essere programmati in codice lato server. Solitamente gli elementi HTML vengono convertiti in controlli server HTML solo se si desidera programmarli utilizzando il codice lato server.
Controlli server Web Controlli specifici dei Web Form che forniscono un numero di funzionalità maggiore rispetto ai controlli server HTML e non hanno una corrispondenza diretta con gli elementi HTML.

In questa sezione verrà illustrato come aggiungere uncontrollo per ogni tipo.

Per aggiungere un controllo server HTML a una paginaWeb Form

Fare clic sulla scheda Progettazione nella parte inferiore per passare alla visualizzazione Progettazione.
Dalla scheda HTML della Casella degli strumenti trascinare nella pagina un elemento Campo di testo.
Passare alla visualizzazione HTML per verificare che sia stato aggiunto un tag simile al seguente:
```
  <INPUT type="text">
```
Passare alla visualizzazione Progettazione.
Convertire l'elemento di testo HTML in un controllo server facendovi clic con il pulsante destro del mouse e scegliendo Esegui come controllo server.
Nell'angolo in alto a sinistra del controllo verrà visualizzata un'icona che indica che il controllo è un controllo server. La conversione di un elemento HTML fa sì che tale elemento venga contrassegnato come controllo server HtmlInputText.

In seguito alla conversione, all'elemento HTML verranno aggiunti due attributi:
- L'attributo id che identifica ilcontrollo nel codice. Per il controllo serverHtmlInputText, questo attributo perimpostazione predefinita è impostato sul nomeText1.
- L'attributo runat viene impostatosu server. In questo modol'elemento viene contrassegnato come controlloserver e viene reso visibile al codice lato server diWeb Form come elemento programmabile.

Per aggiungere un controllo server Web a una paginaWeb Form

Dalla scheda Web Form della Casella degli strumenti, e non dalla scheda HTML, trascinare nella pagina un controllo server Web Button.

Suggerimento Lascheda Web Form è disponibilesolo quando la finestra di progettazione è invisualizzazione Progettazione.

Questo passaggio consente di creare un elemento controllo server Web nella finestra di progettazione anziché un pulsante HTML. Passando alla visualizzazione HTML, verrà visualizzato quanto segue:
```
  <asp:Button id="Button1" runat="server"></asp:Button>
```
Questo elemento non corrisponde direttamente a un elemento HTML. All'esecuzione della pagina, verrà creata ed elaborata un'istanza del controllo server Web Button. Durante l'elaborazione della pagina, il controllo restituisce come output nella pagina alcuni elementi HTML, in questo caso un elemento HTML <input type=submit>.

Aggiunta di testo HTML alla pagina

In modalità layout di griglia posizionare i controlliè semplice. Per quanto riguarda il testo HTML statico,invece, poiché tutti gli elementi della pagina vengonoposizionati tramite le coordinate x e y, non èsufficiente digitare il testo nel punto della pagina dove sidesidera che venga visualizzato, come si farebbe inmodalità layout di flusso.

La soluzione in questo caso consiste nell'aggiungere uncontrollo Label HTML nel quale inserire iltesto statico. Sarà quindi possibile posizionarequesto controllo, solitamente un elemento <DIV>, nelpunto desiderato nella pagina.

Per aggiungere testo statico in modalitàlayout di griglia

Dalla scheda HTML della Casella degli strumenti trascinare nella pagina un controllo Label. Posizionarlo e ridimensionarlo in base al testo da inserirvi.
Fare clic sul controllo Label per selezionarlo, quindi fare clic un'altra volta. Lasciare tempo a sufficienza tra i due clic, in modo da non confondere l'azione con il doppio clic.
Il controllo verrà contrassegnato da un bordo ombreggiato, che identifica la modalità di modifica del testo.
Digitare il testo statico desiderato. Digitare, ad esempio, "Pagina Web Form di esempio".
Selezionare il testo e impostarne formato, tipo di carattere, dimensione e così via utilizzando gli strumenti della barra degli strumenti Formattazione.
Fare clic all'esterno del controllo Label per uscire dalla modalità di modifica del testo.

Creazione di un gestore eventi

Attraverso i controlli server nelle pagine Web Form èpossibile generare diversi eventi. Molti eventi vengonogenerati da operazioni effettuate dall'utente nelbrowser. Un controllo server Web Buttonpuò ad esempio generare un eventoClick quando un utente fa clic su unpulsante della pagina.

Il codice per gestire l'evento generato viene eseguitosul server. Quando l'utente fa clic su un pulsante, lapagina viene inviata nuovamente al server. Nell'ambitodel framework della pagina ASP.NET vengono analizzate leinformazioni relative all'evento e, se si dispone di ungestore eventi corrispondente all'evento, viene chiamatoautomaticamente il codice. Quando il codice termina, lapagina viene inviata nuovamente al browser con le eventualimodifiche apportate.

Per creare un gestore eventi per il controllo serverWeb Button

Fare doppio clic sul controllo server Web Button.
Nella finestra di progettazione verrà aperto il file di classe per il form corrente e verrà creato uno scheletro di gestore eventi per l'evento Click del controllo Button. Il codice risulterà simile al seguente:
```
  ' Visual Basic  Private Sub Button1_Click(ByVal sender as System.Object, ByVal e as System.EventArgs) Handles Button1.Click    End Sub    // C#  private void Button1_Click(object sender, System.EventArgs e)  {    }
```

Scrivere il codice nel metodo per visualizzare un messaggio nel controllo server HtmlInputText impostandone la proprietà Value. Esempio:

  ' Visual Basic  Private Sub Button1_Click(ByVal sender as System.Object, ByVal e as System.EventArgs) Handles Button1.Click   Text1.Value = "Hello, Web Forms!"  End Sub    // C#  private void Button1_Click(object sender, System.EventArgs e)  {  Text1.Value = "Hello, Web Forms!";  }

Generazione ed esecuzione della pagina Web Form

Prima di eseguire la pagina Web Form, è necessariocompilare il relativo file di classe. Sarà quindipossibile visualizzare la pagina in qualsiasi browser.

Per generare ed eseguire la pagina

Fare clic con il pulsante destro del mouse sulla pagina WebForm1.aspx in Esplora soluzioni, quindi scegliere Visualizza nel browser.
La pagina verrà compilata e visualizzata nella scheda Sfoglia.
Fare clic sul pulsante nella pagina Web Form.
Nella casella di testo verrà visualizzato il messaggio "Hello, Web Form!".
Per interrompere l'esecuzione del form e tornare alla modalità progettazione, chiudere la scheda Sfoglia.