Procedura dettagliata: utilizzo avanzato del controllo Wizard ASP.NET

Aggiornamento: novembre 2007

Il controllo ASP.NET Wizard semplifica numerose attività associate alla generazione di più form e all'insieme dell'input dell'utente. In questa procedura dettagliata, il controllo Wizard verrà utilizzato per creare un form per la raccolta delle informazioni sull'indirizzo dell'utente, per consentire agli utenti di scegliere o meno gli aggiornamenti della posta elettronica e per presentare nuovamente i dati e le selezioni effettuate in un passaggio di conferma finale. Di seguito sono elencate le attività illustrate nella procedura dettagliata:

• Modifica del layout di un passaggio della procedura guidata.

• Aggiunta di un passaggio personalizzato alla procedura guidata.

• Acquisizione, a livello di codice, di un evento della procedura guidata.

• Diramazione della procedura guidata in base alle scelte dell'utente.

• Visualizzazione dei dati utente in un passaggio finale.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

• Microsoft Visual Web Developer.

• .NET Framework.

Creazione del sito Web

Se è già stato creato un sito Web in Visual Web Developer (ad esempio, utilizzando l'argomento Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer ), è possibile utilizzare quel sito Web e passare alla sezione "Aggiunta di un controllo Wizard alla pagina", 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.

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 alla pagina.

Per aggiungere un controllo Wizard alla pagina

1. Passare alla visualizzazione Progettazione.

2. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo Wizard nella pagina.

Raccolta di informazioni relative al nome e all'indirizzo

Successivamente, vengono configurati i singoli passaggi della procedura guidata per raccogliere i dati utente, richiedere un indirizzo di posta elettronica e visualizzare i dati raccolti in un passaggio finale.

Innanzitutto, raccogliere il nome, l'indirizzo, la città, lo stato e il codice postale dell'utente.

Per configurare il primo passaggio

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

2. Scegliere il testo sottolineato Step 1 nel controllo Wizard e fare clic nell'area di modifica a destra di Step 1.

   È ora possibile modificare l'area di visualizzazione di Step 1.

3. Digitare Name.

4. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo TextBox accanto al testo.

5. Nella finestra Proprietà, modificare l'ID del controllo TextBox da TextBox1 a Name.

6. Ripetere il processo aggiungendo didascalie e controlli TextBox (ricordare di denominare i controlli in quanto sarà necessario fare riferimento a tali controlli in seguito) per raccogliere le seguenti informazioni:

   • Address

   • City

   • State

   • PostalCode

7. Salvare il file.

Aggiunta di un'opzione di aggiornamento tramite posta elettronica

In questa parte della procedura dettagliata, l'utente potrà scegliere se ricevere aggiornamenti tramite posta elettronica.

Per aggiungere un'opzione di aggiornamento tramite posta elettronica

1. Fare clic su Step 2.

2. Fare clic sull'area modificabile a destra di Step 2 e digitare Would you like to receive e-mail updates?.

3. Al di sotto della domanda, digitare: Yes.

4. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo RadioButton accanto alla parola Yes.

5. Digitare No.

6. Trascinare un altro controllo RadioButton dalla Casella degli strumenti al controllo accanto alla parola No.

Aggiunta di un passaggio personalizzato per raccogliere un indirizzo di posta elettronica

In questa sezione, alla procedura guidata verrà aggiunto un passaggio personalizzato per raccogliere l'indirizzo di posta elettronica dell'utente. In seguito, verrà aggiunto un codice per ignorare questo passaggio se l'utente decide di non ricevere aggiornamenti tramite posta elettronica.

Aggiunta di un passaggio personalizzato per raccogliere l'indirizzo di posta elettronica dell'utente

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

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

   Viene visualizzato l'Editor dell'insieme WizardStep.

3. Nell'elenco a discesa Aggiungi del pulsante Aggiungi, fare clic su WizardStep.

4. Scegliere OK.

   Il nuovo passaggio viene visualizzato nel controllo Wizard.

5. Fare clic sul nuovo passaggio per visualizzarne la modalità di modifica.

6. Nell'area modificabile, digitare E-mail address.

7. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo TextBox nel controllo accanto alle parole E-mail Address.

8. In Proprietà, modificare l'ID del controllo TextBox in EmailAddress in quanto sarà necessario fare riferimento a questo ID in seguito nel codice.

Aggiunta di un passaggio finale

È ora possibile aggiungere un passaggio finale che consentirà di presentare nuovamente all'utente i dati scelti in precedenza.

Per aggiungere un passaggio finale

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

2. Scegliere Aggiungi/Rimuovi WizardSteps dal menu Attività Wizard del controllo.

   Viene visualizzato l'Editor dell'insieme WizardStep.

3. Nell'elenco Aggiungi fare clic su WizardStep.

   Nell'area delle proprietà vengono visualizzati gli attributi del nuovo passaggio.

4. Nella finestra Proprietà impostare la proprietà StepType su Complete.

5. Scegliere OK.

   Il nuovo passaggio viene aggiunto al controllo Wizard.

6. Fare clic sul nuovo passaggio del controllo, quindi selezionare l'area modificabile a destra del nuovo passaggio.

7. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo Label sul nuovo passaggio.

8. Premere INVIO per creare una nuova riga.

9. Ripetere il passaggio 7 altre cinque volte, fino ad aggiungere sei controlli Label corrispondenti a:

   • Nome

   • Indirizzo

   • Città

   • Regione o stato

   • Codice postale

   • Indirizzo di posta elettronica

10. Salvare il file.

Prima che sia possibile eseguire la procedura guidata, è necessario compilare le etichette del passaggio finale con i valori forniti dall'utente nei primi tra passaggi della procedura guidata.

Aggiunta di un codice per il passaggio finale

In questa procedura dettagliata, verranno visualizzati i dati dell'utente nel passaggio finale. Per accertarsi che i dati vengano visualizzati, le etichette del passaggio vengono compilate a livello di codice. Per visualizzare i dati, viene scritto il codice per l'evento Load della pagina.

Per aggiungere un codice

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

   Si apre l'editor di codice per la pagina e viene creata una struttura di metodo Page_Load.

2. Aggiungere il codice evidenziato riportato di seguito per compilare il passaggio finale:

   Private Sub Page_Load(ByVal sender As Object, _
       ByVal e As System.EventArgs) Handles Me.Load
       Label1.Text = Name.Text
       Label2.Text = Address.Text
       Label3.Text = City.Text
       Label4.Text = State.Text
       Label5.Text = PostalCode.Text
       Label6.Text = EmailAddress.Text
   End Sub
   

   void Page_Load(object sender, EventArgs e)
   {
       Label1.Text = Name.Text;
       Label2.Text = Address.Text;
       Label3.Text = City.Text;
       Label4.Text = State.Text;
       Label5.Text = PostalCode.Text;
       Label6.Text = EmailAddress.Text;
   }
   

3. Salvare il file.

Esecuzione del test del controllo Wizard

Per eseguire il test del controllo Wizard

1. Aprire la pagina Default.aspx nella visualizzazione Progettazione.

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

3. Premere CTRL+F5 per eseguire la pagina.

   Nota:
   Quando si esegue la pagina dalla visualizzazione Progettazione, è possibile che il browser inizi dal passaggio delle procedura guidata attivo correntemente, non necessariamente dal primo passaggio. Accertarsi che la proprietà ActiveStepIndex della procedura guidata sia impostata su 0 nella finestra Proprietà prima di avviare la pagina.

4. Digitare le informazioni relative al nome e all'indirizzo.

5. Fare clic su Avanti.

6. Selezionare una delle due opzioni per la posta elettronica.

   Più avanti nella procedura dettagliata verrà scritto il codice per gestire l'opzione della posta elettronica.

7. Digitare un indirizzo di posta elettronica.

8. Fare clic su Fine.

   I dati immessi vengono visualizzati nella pagina.

Nella sezione successiva, verrà aggiunto il codice per ignorare il terzo passaggio relativo alla raccolta della posta elettronica se l'utente sceglie di non fornire un indirizzo di posta elettronica.

Aggiunta del codice per ignorare il passaggio relativo alla posta elettronica

Una volta completati la raccolta dei dati e il layout della procedura guidata, verrà aggiunta la logica per consentire all'utente di ignorare il passaggio per la raccolta dell'indirizzo di posta elettronica nel caso in cui non desideri ricevere aggiornamenti di posta elettronica. Tale operazione viene eseguita mediante la gestione dell'evento NextButtonClick del controllo Wizard. Nel momento in cui si gestisce l'evento, viene innanzitutto verificato se il passaggio visualizzato correntemente nella procedura guidata è quello in cui l'utente effettua la scelta dell'opzione. In questo caso, verificare qual è il controllo RadioButton selezionato. Se l'utente ha scelto No, spostare la proprietà ActiveStepIndex del controllo Wizard in modo da ignorare il passaggio della procedura guidata in cui all'utente viene richiesto l'indirizzo di posta elettronica.

Per aggiungere il codice per ignorare il terzo passaggio

1. Scegliere il controllo Wizard. Nella finestra Proprietà, digitare Wizard1_NextButtonClick per la proprietà NextButtonClick e premere INVIO.

   Nella finestra dell'editor di codice viene visualizzata la pagina del codice.

2. Aggiungere il codice evidenziato riportato di seguito che consente di verificare se il passaggio è corretto, di determinare qual è il controllo RadioButton selezionato e di definire se ignorare il passaggio 3 della procedura guidata.

   Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
      Handles Wizard1.NextButtonClick
      If Wizard1.ActiveStepIndex = 1 Then
          If RadioButton1.Checked Then
              ' Collect e-mail address.
              Wizard1.ActiveStepIndex = 2
          Else
              Wizard1.ActiveStepIndex = 3
          End If
      End If
   End Sub
   

   void Wizard1_NextButtonClick(object sender, 
       System.Web.UI.WebControls.WizardNavigationEventArgs e)
   {
        if (Wizard1.ActiveStepIndex == 1)
        {
           if (RadioButton1.Checked)
               // Collect ee-mail address.
           {
              Wizard1.ActiveStepIndex = 2;
           } 
           else 
           {
              Wizard1.ActiveStepIndex = 3;
           }
        }
   }
   

   Se viene impostata la proprietà ActiveStepIndex la procedura guidata passa direttamente al passaggio specificato.

3. Salvare il file.

Esecuzione del test della funzionalità per ignorare un passaggio

Per eseguire il test della funzione per ignorare un passaggio della procedura guidata a livello di codice

1. Aprire la pagina Default.aspx nella visualizzazione Progettazione.

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

3. Premere CTRL+F5 per eseguire la pagina.

4. Digitare le informazioni relative al nome e all'indirizzo.

5. Fare clic su Avanti.

6. In Step 2, selezionare la casella di controllo No.

7. Fare clic su Avanti.

   Verrà visualizzato il passaggio finale.

8. Utilizzare il pulsante Indietro del browser per ritornare al primo passaggio oppure chiudere il browser e premere CTRL+F5 per eseguire nuovamente la pagina.

9. Digitare le informazioni relative al nome e all'indirizzo nel primo passaggio.

10. Fare clic su Avanti.

11. In Step 2, selezionare la casella di controllo Yes.

12. Fare clic su Avanti.

13. Viene visualizzato il passaggio per la raccolta dell'indirizzo di posta elettronica.

14. Digitare un indirizzo di posta elettronica.

15. Fare clic su Avanti.

16. Verrà visualizzato il passaggio finale.

Passaggi successivi

Il controllo Wizard consente di semplificare la creazione di form per la raccolta dei dati utente. Oltre agli argomenti illustrati in questa procedura dettagliata, è possibile che l'utente abbia altre domande relative ai form nonché all'applicazione di un aspetto diverso al controllo Wizard. Può, ad esempio, essere necessario:

• Eseguire l'override delle etichette di testo predefinite del controllo Wizard. Per informazioni dettagliate, vedere Cenni preliminari sul controllo server Web Wizard

• Convalidare le voci dell'utente nel controllo Wizard. Per informazioni dettagliate, vedere Procedura dettagliata: convalida dell'input dell'utente in una pagina Web Form

• Ricevere ulteriori informazioni sul funzionamento di base del controllo Wizard. Per informazioni dettagliate, vedere Procedura dettagliata: creazione di un controllo Wizard ASP.NET di base.

Vedere anche

Riferimenti

Cenni preliminari sul controllo server Web Wizard