ASP.NET - Controlli 7

ASP.NET

MultiView

Il controllo MultiView è un insieme di contenitori di altri controlli; ogni contenitore si chiama ‘View’ e può essere reso visibile facilmente.
È utilizzato quando occorre inserire in un’unica pagina molti controlli che devono essere attivati un gruppo alla volta. Tutti i controlli sono ovviamente accessibili (tramite le proprietà) da tutte le View del MultiView, dato che stanno nella stessa pagina.
Il codice HTML seguente prepara un MultiView (chiamato ‘mvwDati’) con tre View (chiamati ‘vwDati1’, ‘vwDati2’ e ‘vwDati3’). Non è presente nessun controllo nei View.

<asp:MultiView ID="mvwDati" runat="server">
 <asp:View ID="vwDati1" runat="server"></asp:View>
 <asp:View ID="vwDati2" runat="server"></asp:View>
 <asp:View ID="vwDati3" runat="server"></asp:View>
 </asp:MultiView>

In fase di progettazione appare così:

In fase di esecuzione non appare niente finché non si imposta il View attivo con la proprietà ‘ActiveViewIndex’ (indice a base 0).
È compito del programmatore progettare la logica con la quale rendere visibili le View. Per esempio si possono aggiungere i bottoni ‘Prev’ (che sta per ’previous’, cioè precedente) e ‘Next’ (che sta per successivo). La prima View non ha una View precedente, così come l’ultima View non ha una View successiva ma una funzione che conclude il processo con un salvataggio dati.
Esempio di gestione delle View.
Codice HTML:

<asp:MultiView ID="mvwDati" runat="server">
 <asp:View ID="vwDati1" runat="server">
 <asp:Label ID="lblDati1" runat="server" Text="Dati1"></asp:Label>
 
 <asp:Button ID="btnDati1Next" runat="server"
 Text="Next" OnClick="btnDati1Next_Click" />
 </asp:View>
 <asp:View ID="vwDati2" runat="server">
 <asp:Label ID="lblDati2" runat="server" Text="Dati2"></asp:Label>
 
 <asp:Button ID="btnDati2Prev" runat="server"
 Text="Prev" OnClick="btnDati2Prev_Click" />
 <asp:Button ID="btnDati2Next" runat="server"
 Text="Next" OnClick="btnDati2Next_Click" />
 </asp:View>
 <asp:View ID="vwDati3" runat="server">
 <asp:Label ID="lblDati3" runat="server" Text="Dati3"></asp:Label>
 
 <asp:Button ID="btnDati3Prev" runat="server"
 Text="Prev" OnClick="btnDati3Prev_Click" />
 <asp:Button ID="btnDati3Finish" runat="server"
 Text="Finish" OnClick="btnDati3Finish_Click" />
 </asp:View>
 </asp:MultiView>

Controlli in fase di progettazione:

Codice C#:

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           mvwDati.ActiveViewIndex = 0;
       }
   }

   protected void btnDati1Next_Click(object sender, EventArgs e)
   {
       mvwDati.ActiveViewIndex = 1;
   }

   protected void btnDati2Prev_Click(object sender, EventArgs e)
   {
       mvwDati.ActiveViewIndex = 0;
   }

   protected void btnDati2Next_Click(object sender, EventArgs e)
   {
       mvwDati.ActiveViewIndex = 2;
   }

   protected void btnDati3Prev_Click(object sender, EventArgs e)
   {
       mvwDati.ActiveViewIndex = 1;
   }

   protected void btnDati3Finish_Click(object sender, EventArgs e)
   {
       // Save data.
   }

Wizard

Il controllo Wizard permette di creare una interfaccia per inserire dati in più fasi.
Il controllo fornisce di default i bottoni per navigare avanti e indietro tra le varie fasi e i link per saltare da una fase all’altra.
Il controllo Wizard ha un insieme di ‘WizardStep’ (che definiscono le varie fasi di inserimento dati).
Ecco come appare il controllo in fase di Design (per chiarezza ho messo 5 ‘Step’):

In fase di esecuzione, in base allo Step selezionato, il Wizard rende visibili alcuni bottoni e invisibili altri. Di default:

- il primo Step ha il bottone ‘Avanti’;

- gli Step centrali hanno i bottoni ‘Precedente’ e ‘Avanti’;

- l’ultimo Step ha i bottoni ‘Precedente’ e ‘Fine’.

Ecco il codice HTML:

<asp:Wizard ID="wzrDataInsert" runat="server">
 <WizardSteps>
 <asp:WizardStep ID="wzsStep1" runat="server" Title="Step 1"></asp:WizardStep>
 <asp:WizardStep ID="wzsStep2" runat="server" Title="Step 2"></asp:WizardStep>
 <asp:WizardStep ID="wzsStep3" runat="server" Title="Step 3"></asp:WizardStep>
 <asp:WizardStep ID="wzsStep4" runat="server" Title="Step 4"></asp:WizardStep>
 <asp:WizardStep ID="wzsStep5" runat="server" Title="Step 5"></asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>

Aree del controllo Wizard

Nella figura sotto, le aree del controllo Wizard.

Nero: Header (area dell’intestazione).
Verde: SideBar (area laterale).
Rosso: Step (area centrale, dove inserire i controlli).
Blu: Navigation (area di navigazione).

Proprietà
Generali

Con la proprietà ‘StepType’ del WizardStep, si può indicare il tipo di ‘Step’ e di conseguenza i bottoni visualizzati nello Step.

- Auto: è il valore di default e i bottoni visualizzati dipendono dall’ordine del WizardStep (primo, centrale, ultimo).

- Start: solo il bottone ‘Avanti’.

- Step: i bottoni ‘Precedente’ e ‘Avanti’.

- Finish: i bottoni ‘Precedente’ e ‘Fine’.

- Complete: nessun bottone (e nessun link agli altri Step), utile per uno Step di riepilogo.

ActiveStepIndex: per impostare lo Step attivo (è a base 0). Nota: se si vuole leggere questa proprietà, non farlo nell’evento Page_Load() ma in Page_PreRender(), altrimenti la proprietà non è aggiornata.
DisplayCancelButton: default è false, mostra o nasconde il bottone ‘Annulla’, che va poi gestito dal programmatore.

Header (Instestazione)
HeaderText: testo dell’intestazione (se nullo, non viene mostrata l’intestazione).
HeaderStyle: stile dell’intestazione.

Navigation (Area di navigazione)

NavigationStyle: per impostare lo stile dell’area che contiene i bottoni di navigazione.
NavigationButtonStyle: per impostare lo stile dei bottoni di navigazione.

SideBar (Area laterale)

DisplaySideBar: mostra o nasconde la barra di navigazione con i link diretti alle pagine.
SideBarStyle: per impostare lo stile dell’area che contiene i link diretti alle pagine.
SideBarButtonStyle: per impostare lo stile dei link diretti alle pagine.

Step (Area centrale, dove inserire i controlli)

StepStyle: per impostare lo stile dell’area che contiene i controlli da inserire per i vari step.

Bottoni di navigazione

Le proprietà dei bottoni di navigazione, dipendono dal tipo di bottone e dal tipo di Step.
Se StepType = ‘Start’, bottone ‘Next’:

- StartNextButtonType: tipo di bottone (Button, Image, Link).

- StartNextButtonText: testo del bottone.

- StartNextButtonStyle: stile del bottone.

- StartNextButtonImageUrl: immagine del bottone (se è di tipo image).

Se StepType = ‘Step’, bottone ‘Previous’:

- StepPreviousButtonType: tipo di bottone (Button, Image, Link).

- StepPreviousButtonText: testo del bottone.

- StepPreviousButtonStyle: stile del bottone.

- StepPreviousButtonImageUrl: immagine del bottone (se è di tipo image).

Se StepType = ‘Step’, bottone ‘Next’:

- StepNextButtonType: tipo di bottone (Button, Image, Link).

- StepNextButtonText: testo del bottone.

- StepNextButtonStyle: stile del bottone.

- StepNextButtonImageUrl: immagine del bottone (se è di tipo image).

Se StepType = ‘Finish’, bottone ‘Previous’:

- FinishPreviousButtonType: tipo di bottone (Button, Image, Link).

- FinishPreviousButtonText: testo del bottone.

- FinishPreviousButtonStyle: stile del bottone.

- FinishPreviousButtonImageUrl: immagine del bottone (se è di tipo image).

Se StepType = ‘Finish’, bottone ‘Finish’ (Attenzione ai nomi delle proprietà, chiamate stranamente ‘FinishComplete*’):

- FinishCompleteButtonType: tipo di bottone (Button, Image, Link).

- FinishCompleteButtonText: testo del bottone.

- FinishCompleteButtonStyle: stile del bottone.

- FinishCompleteButtonImageUrl: immagine del bottone (se è di tipo image).

- FinishDestinationPageUrl: indirizzo della pagina dove andare. Se non impostato, si andrà nello StepType = ‘Complete’, se presente.

Se bottone = ‘Cancel’ (per tutti gli Step, ma il bottone deve essere abilitato con la proprietà DisplayCancelButton):

- CancelButtonType: tipo di bottone (Button, Image, Link).

- CancelButtonText: testo del bottone.

- CancelButtonStyle: stile del bottone.

- CancelButtonImageUrl: immagine del bottone (se è di tipo image).

Instestazione dinamica e impostazione del Focus

In base allo Step attivo, si può modificare l’intestazione del controllo Wizard e impostare il Focus al primo oggetto utile.
Per fare questo, bisogna utilizzare l’evento Page_PreRender().

   protected void Page_PreRender(object sender, EventArgs e)
   {
       switch (wzrDataInsert.ActiveStepIndex)
       {
           case 0:
               wzrDataInsert.HeaderText = "Inserisci i dati 1 e 2";
               TextBox1.Focus();
               break;
           case 1:
               wzrDataInsert.HeaderText = "Inserisci i dati 3 e 4";
               TextBox3.Focus();
               break;
           case 2:
               wzrDataInsert.HeaderText = "Inserisci i dati 5 e 6";
               TextBox5.Focus();
               break;
           case 3:
               wzrDataInsert.HeaderText = "Inserisci i dati 7 e 8";
               TextBox7.Focus();
               break;
           default:
               break;
       }
   }

Eventi

ActiveStepChanged: generato al cambio dello step attivo.
CancelButtonClick: generato alla pressione del bottone ‘Cancel’.
PreviousButtonClick, NextButtonClick, FinishButtonClick, SideBarButtonClick: generati alla pressione dei relativi bottoni. Questi eventi hanno come parametro anche ‘WizardNavigationEventArgs’ che permette di ricavare l’indice corrente e l’indice successivo di navigazione, ma anche di annullare la navigazione.
Esempio:

protected void wzrDataInsert_NextButtonClick(object sender, WizardNavigationEventArgs e)
 {
 Response.Write("Navigation from: " + e.CurrentStepIndex + " ");
 Response.Write("Navigation to: " + e.NextStepIndex + " ");
 e.Cancel = true; // Annulla la navigazione
 }

Aggiungere JavaScript ai bottoni

I bottoni del controllo Wizard, sono generati dal controllo stesso e non sono visibili nel codice HTML. Per visualizzare il codice HTML relativo a questi bottoni, si può fare come descritto qua sotto.
In fase di progettazione, visualizzare la SmartTag menu.

In questo menu, sono presenti quattro voci, ognuna delle quali aggiunge un pezzo di codice HTML al controllo. La voce ‘Convert to StartNavigationTemplate’, aggiunge il codice per la gestione dello step di tipo ‘Start’. In modo analogo, si può aggiungere codice per la gestione dello step intermedio, dello step ‘Finish’ e della SideBar.
Se per esempio si aggiunge il codice per lo step intermedio, nella pagina HTML si hanno le seguenti righe:

Questo ‘Template’ gestisce gli step intermedi, che hanno quindi due bottoni.
Adesso è semplice aggiungere del codice JavaScript, perché basta scriverlo nell’evento ‘OnClientClick()’:

<asp:Button ID="StepPreviousButton" runat="server"
 CausesValidation="False"
 CommandName="MovePrevious"
 Text="Previous"
 OnClientClick="return confirm('Confermi di andare al passo precedente?');" />

Il codice JavaScript può essere aggiunto anche nel codice C#. Non si può fare riferimento però alla variabile dal suo ID (che nell’esempio è ‘StepPreviousButton’), perché esso è contenuto in un ‘Template’. Bisogna invece fare ricorso al metodo ‘FindControl()’.
Nello specifico bisogna prima fare un FindControl() dell’oggetto StepNavigationTemplate, poi un FindControl dell’oggetto Button.
C’è una complicazione: l’oggetto StepNavigationTemplate non ha un ID e non possiamo neanche aggiungerlo a mano. Se però mandiamo in esecuzione la pagina e controlliamo il codice HTML generato da ASP.NET, troviamo l’ID che serve: ‘StepNavigationTemplateContainerID’.
L’oggetto Button, invece ha l’ID scritto in chiaro: ‘StepPreviousButton’.
A questo punto si può aggiungere il codice JavaScript al bottone, per esempio nell’evento Page_Load():

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           Button btn = (Button) wzrDataInsert.FindControl("StepNavigationTemplateContainerID").FindControl("StepPreviousButton");
           btn.OnClientClick = "return confirm('Confermi di andare al passo precedente?');";
       }
   }