Pagina personale di:
Carlo Vecchio
appunti di C#, R, SQL Server, ASP.NET, algoritmi, numeri
Vai ai contenuti

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



© 2020 Carlo Vecchio
Torna ai contenuti