ASP.NET - Controlli 6

ASP.NET

Panel

Il controllo Panel è un contenitore di altri controlli. Non ha quindi un aspetto visibile in esecuzione.
Quando viene trasformato in HTML dall’ASP.NET, diventa generalmente un tag ‘<div>’, anche se questo può dipendere dal Browser.
Essendo un contenitore che può essere reso visibile o invisibile, più Panel sono normalmente utilizzati per rendere visibili gruppi di controlli ed invisibili altri gruppi di controlli secondo le logiche richieste all’applicazione.
Nell’esempio seguente, una DropDownList permette di scegliere il tipo di accesso ad un sito. Se l’utente sceglie l’accesso con "e-mail" sono visualizzate due TextBox per l’input dell’e-mail e della password. Se l’utente sceglie l’accesso con "id" sono visualizzate altre due TextBox per l’input dell’id e della password.
Codice HTML:

   <asp:DropDownList ID="ddlSelezione" runat="server"
       OnSelectedIndexChanged="ddlSelezione_SelectedIndexChanged"
       AutoPostBack="true">
       <asp:ListItem Text="Scegli il tipo di accesso" Value="-1" />
       <asp:ListItem Text="Accesso con e-mail" Value ="email" />
       <asp:ListItem Text="Accesso con Id" Value ="id" />
   </asp:DropDownList>
   <br />
   <asp:Panel ID="pnlAccessoConMail" runat="server">
       <table>
           <tr>
               <td><asp:Label ID="Label1" runat="server" Text="E-mail:"></asp:Label></td>
               <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
           </tr>
           <tr>
               <td><asp:Label ID="Label2" runat="server" Text="Password:"></asp:Label></td>
               <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
           </tr>
       </table>
   </asp:Panel>
   <asp:Panel ID="pnlAccessoConId" runat="server">
       <table>
           <tr>
               <td><asp:Label ID="Label3" runat="server" Text="Id:"></asp:Label></td>
               <td><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
           </tr>
           <tr>
               <td><asp:Label ID="Label4" runat="server" Text="Password:"></asp:Label></td>
               <td><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
           </tr>
       </table>
   </asp:Panel>

Il codice HTML produce in ambiente di progettazione Visual Studio:

Nel code-behind, occorre aggiungere un paio di eventi. Nel ‘Page_Load()’ vanno resi non visibili tutti i pannelli, mentre nel ‘ddlSelezione_SelectedIndexChanged()’ c’è il codice che visualizza o nasconde il pannello selezionato.
Eventi:

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           pnlAccessoConMail.Visible = false;
           pnlAccessoConId.Visible = false;
       }
   }

   protected void ddlSelezione_SelectedIndexChanged(object sender, EventArgs e)
   {
       if (ddlSelezione.SelectedValue == "-1")
       {
           pnlAccessoConMail.Visible = false;
           pnlAccessoConId.Visible = false;
       }
       else if (ddlSelezione.SelectedValue == "email")
       {
           pnlAccessoConMail.Visible = true;
           pnlAccessoConId.Visible = false;
       }
       else if (ddlSelezione.SelectedValue == "id")
       {
           pnlAccessoConMail.Visible = false;
           pnlAccessoConId.Visible = true;
       }
   }

Non dimenticare di impostare la proprietà seguente per la DropDownList, altrimenti al cambio della selezione non avviene il Post della pagina.

AutoPostBack="true"

Aggiunta dinamica di controlli in un Panel

Un pannello può essere utilizzato anche per contenere un insieme di controlli generati dinamicamente nel code-behind.
Per fare questo basta utilizzare la Collection ‘Controls’. Ecco un esempio dove al click del bottone ‘btnAddControls’ il codice genera tre TextBox e le inserisce all’interno del pannello ‘pnlControls’.

   protected void btnAddControls_Click(object sender, EventArgs e)
   {
       for (int i = 1; i <= 3; i++)
       {
           TextBox txt = new TextBox();
           txt.Text = "TextBox " + i.ToString();
           pnlControls.Controls.Add(txt);
       }
   }

Ecco il risultato del codice precedente.

Nota: attenzione al fatto che l’aggiunta di controlli dinamici va fatta ad elementi che abbiano l’attributo ‘runat=server’, altrimenti viene generato un errore. Per esempio non è possibile aggiungere controlli alla pagina in quanto non ha l’attributo specificato.

PlaceHolder

Il controllo PlaceHolder è molto simile al controllo Panel.
Può contenere altri controlli al suo interno e questi possono essere generati anch’essi dinamicamente. E come il Panel può essere impostato visibile o non visibile.
Generalmente il PlaceHolder è convertito dall’ASP.NET in un tag <span>.
Rispetto al Panel, ha qualche proprietà in meno, come ‘BackImageUrl’, ‘HorizontalAlign’ e ‘Wrap’.