Antonio Feliziani
a- a+

Creazione di una pagina Web Form con Web control

In questa procedura dettagliata viene illustrato come creare una pagina Web Form. Verrà mostrato come aggiungere controlli alla pagina e creare codice per i controlli che verranno eseguiti sul server. Di seguito sono elencate le attività 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 alla seguente:

d

 

Creazione di progetti e form

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

Per creare il progetto e il form

  1. Dal menu File scegliere Nuovo, quindi Progetto.
  2. Nella finestra di dialogo Nuovo progetto effettuare le seguenti operazioni:
    1. Nel riquadro Tipi progetto scegliere Progetti di Visual Basic o Progetti di Visual C#.
    2. Nel riquadro Modelli scegliere Applicazione Web ASP .NET.
    3. Nella casella Percorso immettere l'URL completo per l'applicazione, comprensivo di http://, del nome del server e del nome del progetto. È necessario che nel server Web siano installati IIS versione 5 o successiva e .NET Framework. Se nel computer è installato IIS, è possibile specificare http://localhost per il server. Se solitamente si accede a Internet utilizzando un server proxy, è possibile che occorra configurare Internet Explorer in modo da ignorarlo per poter 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 Web Form e la disposizione di Progettazione Web Form. In Progettazione Web Form è visualizzato un file denominato WebForm1.aspx. Una pagina Web Form consiste di due file 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 in Esplora 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 presenti due schede, Progettazione e HTML, che consentono di visualizzare in modo diverso 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, ogni visualizzazione viene aggiornata con le modifiche apportate nell'altra. Di seguito verrà illustrato l'utilizzo dell'editor di codice per scrivere il codice per il file di classe della pagina (ASPX.VB o ASPX.CS).

 

Aggiunta di controlli e di testo

A questo punto è possibile aggiungere controlli e testo alla pagina.

Modalità griglia o modalità flusso.

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

In alternativa, è possibile utilizzare la modalità layout di flusso, nella quale gli elementi sono posizionati dall'alto verso il basso come in una pagina HTML tradizionale. Ognuna delle due visualizzazioni offre dei vantaggi: in modalità griglia è più semplice posizionare gli elementi, mentre in modalità flusso è più semplice aggiungere testo statico.

In questa procedura dettagliata verrà utilizzata la modalità griglia e verrà illustrato come posizionare 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 viene creata un'istanza dei controlli in codice lato server, come parte della classe della pagina. Quando gli utenti interagiscono con i controlli, ad esempio facendo clic su un controllo pulsante di Web Form, il codice associato viene eseguito sul server dopo che la pagina è stata inviata. È possibile utilizzare il codice lato server per scrivere gestori eventi per i controlli server, impostarne le proprietà e così via.

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

Per questo motivo, se si desidera utilizzare i controlli in una pagina Web Form, è necessario aggiungerli come controlli 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 un controllo per ogni tipo.

Per aggiungere un controllo server HTML a una pagina Web Form

  1. Fare clic sulla scheda Progettazione nella parte inferiore per passare alla visualizzazione Progettazione.
  2. 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">
    
  3. Passare alla visualizzazione Progettazione.
  4. 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 il controllo nel codice. Per il controllo server HtmlInputText, questo attributo per impostazione predefinita è impostato sul nome Text1.
    • L'attributo runat viene impostato su server. In questo modo l'elemento viene contrassegnato come controllo server e viene reso visibile al codice lato server di Web Form come elemento programmabile.

Per aggiungere un controllo server Web a una pagina Web Form

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

    Suggerimento   La scheda Web Form è disponibile solo quando la finestra di progettazione è in visualizzazione 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 vengono posizionati tramite le coordinate x e y, non è sufficiente digitare il testo nel punto della pagina dove si desidera che venga visualizzato, come si farebbe in modalità layout di flusso.

La soluzione in questo caso consiste nell'aggiungere un controllo Label HTML nel quale inserire il testo statico. Sarà quindi possibile posizionare questo controllo, solitamente un elemento <DIV>, nel punto desiderato nella pagina.

Per aggiungere testo statico in modalità layout di griglia

  1. Dalla scheda HTML della Casella degli strumenti trascinare nella pagina un controllo Label. Posizionarlo e ridimensionarlo in base al testo da inserirvi.
  2. 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.

  3. Digitare il testo statico desiderato. Digitare, ad esempio, "Pagina Web Form di esempio".
  4. Selezionare il testo e impostarne formato, tipo di carattere, dimensione e così via utilizzando gli strumenti della barra degli strumenti Formattazione.
  5. 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 vengono generati da operazioni effettuate dall'utente nel browser. Un controllo server Web Button può ad esempio generare un evento Click quando un utente fa clic su un pulsante della pagina.

Il codice per gestire l'evento generato viene eseguito sul server. Quando l'utente fa clic su un pulsante, la pagina viene inviata nuovamente al server. Nell'ambito del framework della pagina ASP.NET vengono analizzate le informazioni relative all'evento e, se si dispone di un gestore eventi corrispondente all'evento, viene chiamato automaticamente il codice. Quando il codice termina, la pagina viene inviata nuovamente al browser con le eventuali modifiche apportate.

Per creare un gestore eventi per il controllo server Web Button

  1. 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)  {    }
    
  2. 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, è necessario compilare il relativo file di classe. Sarà quindi possibile visualizzare la pagina in qualsiasi browser.

Per generare ed eseguire la pagina

  1. 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.

  2. Fare clic sul pulsante nella pagina Web Form.

    Nella casella di testo verrà visualizzato il messaggio "Hello, Web Form!".

  3. Per interrompere l'esecuzione del form e tornare alla modalità progettazione, chiudere la scheda Sfoglia.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti