Procedura dettagliata: creazione di un controllo Wizard ASP.NET di base

Aggiornamento: novembre 2007

La generazione di una serie di form per raccogliere i dati utente è un'attività comune quando si sviluppano siti Web. Il controllo Wizard ASP.NET consente di semplificare molte delle attività correlate alla generazione di form e alla raccolta di input dell'utente fornendo un meccanismo che permette di generare facilmente procedure, aggiungere un nuovo passaggio o riordinare le procedure. In questa procedura dettagliata verrà utilizzato il controllo Wizard ASP.NET per semplificare la raccolta dati come una serie di passaggi indipendenti senza la necessità di scrivere il codice o rendere permanenti i dati utente tra i passaggi del form. Verrà creata una procedura guidata semplice per raccogliere il nome e l'indirizzo di posta elettronica di un utente e quindi presentarla nuovamente all'utente nel passaggio finale. Di seguito sono elencate le attività illustrate nella procedura dettagliata:

• Aggiunta di un controllo Wizard alla pagina.

• Aggiunta di controlli e testo a un passaggio guidato.

• Accesso ai dati della procedura guidata tra passaggi.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

• Visual Studio o Visual Web Developer.

Creazione del sito Web

Se è già stato creato un sito Web, ad esempio seguendo la procedura riportata in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito Web e passare a "Aggiunta di un controllo Wizard" più avanti nella procedura dettagliata. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

1. Aprire Visual Web Developer o Visual Studio.

2. Scegliere Nuovosito Web dal menu File.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

4. Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.

   Digitare, ad esempio, il nome cartella C:\WebSites.

5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione con cui lavorare.

6. Scegliere OK.

   La cartella viene creata insieme a una nuova pagina chiamata Default.aspx.

Aggiunta di un controllo Wizard

Per aggiungere un controllo Wizard

1. Passare a visualizzazione Progettazione per Default.aspx.

2. Dalla scheda Standard della Casella degli strumenti, trascinare un controllo Wizard nella pagina.

   Il controllo viene visualizzato con due passaggi predefiniti già inseriti. La scelta dei passaggi consente di modificare il testo e i controlli visualizzati durante quel passaggio.

Modifica dei passaggi guidati

Quando il controllo Wizard viene trascinato nella pagina, per impostazione predefinita viene visualizzato con due passaggi predefiniti. Per questa procedura dettagliata verranno modificati i due passaggi e verrà aggiunto un passaggio finale in cui viene visualizzato il risultato dei primi due passaggi: un nome utente e un indirizzo di posta elettronica.

Per modificare il primo passaggio guidato

1. Trascinare uno degli handle al bordo del controllo Wizard per allargare il controllo fino a raddoppiarne la dimensione predefinita.

2. Fare clic sul testo sottolineato Step 1 nel controllo Wizard.

3. Fare clic sull'area di modifica per il controllo Wizard.

   È possibile modificare a questo punto l'area di visualizzazione del passaggio.

4. Digitare Name:.

5. Trascinare un controllo TextBox nell'area attiva della procedura guidata, accanto al testo appena digitato.

È possibile modificare il secondo passaggio per raccogliere l'indirizzo di posta elettronica di un utente.

Per modificare il secondo passaggio guidato

1. Fare clic su Step 2 nel controllo Wizard.

2. Fare clic sull'area di modifica per il controllo Wizard.

3. Digitare Email:.

4. Trascinare un controllo TextBox nell'area attiva della procedura guidata, accanto all'etichetta della posta elettronica.

5. Salvare il file.

Aggiunta di un passaggio finale

Verrà creato un passaggio finale che funge da punto finale della procedura guidata. Il passaggio Complete non dispone di alcuna opzione di spostamento.

Per aggiungere un passaggio finale

1. Fare clic con il pulsante destro del mouse sul controllo Wizard.

2. Scegliere Mostra smart tag.

3. Nella finestra di dialogo Attività Wizard scegliere Aggiungi/Rimuovi WizardSteps.

   Viene visualizzato l'Editor dell'insieme WizardStep.

4. Dall'elenco a discesa Aggiungi del pulsante Aggiungi, selezionare WizardStep.

   Il nuovo passaggio verrà visualizzato nell'area Proprietà.

5. Impostare la proprietà Title su Finished.

6. Impostare la proprietà StepType su Complete.

7. Scegliere OK.

A questo punto è possibile modificare il nuovo passaggio finale. Ai fini di questa procedura dettagliata, configurare il passaggio finale per visualizzare i dati immessi dall'utente nei passaggi precedenti.

Per modificare il passaggio finale

1. Fare clic con il pulsante destro del mouse sul controllo Wizard e scegliere Mostra smart tag.

2. Nella finestra di dialogo Attività Wizard, utilizzare l'elenco a discesa Step per scegliere il passaggio Finished.

   Nota:
   Il nome nell'elenco a discesa sarà quello fornito al passaggio quando viene creato, Finished in questo esempio.

3. Trascinare un controllo Label nella procedura guidata lasciando il nome predefinito di Label1.

4. Trascinare un altro controllo Label nella procedura guidata lasciando il nome predefinito di Label2.

5. Salvare il file.

Nel passaggio finale verranno visualizzati i dati immessi dall'utente. Utilizzare l'evento Load della pagina per assegnare i valori dai primi due passaggi alle etichette aggiunte al passaggio finale.

Per visualizzare i dati dell'utente

1. Tornare alla pagina Default.aspx e, in visualizzazione Progettazione, fare doppio clic sull'area di progettazione.

   Nella pagina è contenuto un metodo Page_Load che viene generato automaticamente.

2. Aggiungere il codice evidenziato riportato di seguito.

   Private Sub Page_Load(ByVal sender As Object, _
           ByVal e As System.EventArgs) _
           Handles Me.Load
       Label1.Text = TextBox1.Text    Label2.Text = TextBox2.Text
   End Sub
   

   void Page_Load(Object sender, System.EventArgs e)
   {
       Label1.Text = TextBox1.Text;    Label2.Text = TextBox2.Text;
   }
   

3. Salvare il file.

Esecuzione del test del controllo Wizard

A questo punto è possibile eseguire il test del controllo Wizard.

Per eseguire il test del controllo Wizard

1. Visualizzare Default.aspx nella visualizzazione Progettazione.

2. Visualizzare il menu Attività Wizard del controllo e selezionare Step 1 dall'elenco a discesa Step.

3. Scegliere il controllo Wizard e premere CTRL+F5.

4. Digitare un nome nel controllo TextBox per Step 1.

5. Fare clic su Avanti.

6. Digitare un indirizzo di posta elettronica nel controllo TextBox di posta elettronica per Step 2.

7. Fare clic su Fine.

   Vengono visualizzati i propri dati.

Passaggi successivi

Il controllo Wizard consente di semplificare la creazione di form per la raccolta dei dati utente. Oltre a quanto illustrato in questa procedura dettagliata, possono esservi altre domande correlate alla raccolta dei dati utente e all'utilizzo dei form. Può, ad esempio, essere necessario:

• Acquisire ulteriori informazioni sull'autenticazione degli utenti con i Form. Per informazioni dettagliate, vedere Procedura: implementare l'autenticazione basata su form semplice

• Utilizzare temi per migliorare l'aspetto della procedura guidata. Per informazioni dettagliate, vedere Cenni preliminari su temi e interfacce ASP.NET

• Acquisire cenni preliminari sulla classe Wizard. Per informazioni dettagliate, vedere Cenni preliminari sul controllo server Web Wizard

Vedere anche

Riferimenti

Cenni preliminari sul controllo server Web Wizard