انواع کنترل پنل ها در ASP.NET - بررسی با مثال

کنترل پنل (Panel Control) به عنوان یک کنترلر برای سایر کنترل های صفحه عمل می کند. کنترل پنل ، ظاهر (appearance) و دید (visibility) کنترل هایی که حاوی آنها می باشد را کنترل می نماید. هم چنین اجازه می دهد تا کنترل ها را به صورت برنامه ریزی شده تولید نمود.

قاعده نوشتاری (syntax) پایه ای کنترل پنل به صورت زیر می باشد:

<asp:Panel ID= "Panel1"  runat = "server">
</asp:Panel>

کنترل پنل از کلاس WebControl مشتق شده است. از این رو ، تمام خصیصه ها ، متدها و رویدادهای آن را به ارث برده است. این کنترل هیچ رویداد یا متدی از خود ندارد. با این حال ، خصیصه های زیر متعلق به این کنترل می باشند:

کار با کنترل پنل

بیایید کار را با یک پنل scrollbar ساده که دارای طول و عرض و سبک حاشیه مشخص است ، شروع نماییم. خصیصه ScrollBars مجموعه ای از دو scrollbra می باشد که هر دو آنها رندر شده اند.

فایل source برای تگ panel ، دارای کد زیر می باشد:

<asp:Panel ID="Panel1" runat="server" BorderColor="#990000" BorderStyle="Solid" 
   Borderstyle="width:1px" Height="116px" ScrollBars="Both" style="width:278px">
   
   This is a scrollable panel.
   <br />
   <br />

   <asp:Button ID="btnpanel" runat="server" Text="Button" style="width:82px" />
</asp:Panel>

پنل مطابق شکل زیر رندر می شود:

مثال

مثال زیر ، نحوه تولید محتوای داینامیک را نشان می دهد. کاربر تعداد کنترل های label و کادر متن تولید شده در پنل را فراهم می کند. کنترل های به صورت برنامه ریزی شده تولید می شوند.

خصیصه های پنل را با استفاده از پنجره properties تغییر می دهیم. هنگامی که یک کنترل را در design view انتخاب می کنیم ، پنجره properties ، خصیصه های کنترل خاص را نمایش می دهد و اجازه می دهد که تغییرات را بدون تایپ کردن اعمال نماییم.

فایل source برای مثال فوق به صورت زیر می باشد:

<form id="form1" runat="server">
   <div>
      <asp:Panel ID="pnldynamic" runat="server" BorderColor="#990000" 
         BorderStyle="Solid" Borderstyle="width:1px" Height="150px"  ScrollBars="Auto" style="width:60%" BackColor="#CCCCFF"  Font-Names="Courier" HorizontalAlign="Center">
     
         This panel shows dynamic control generation:
         <br />
         <br />
      </asp:Panel>
   </div>

   <table style="width: 51%;">
      <tr>
         <td class="style2">No of Labels:</td>
         <td class="style1">
            <asp:DropDownList ID="ddllabels" runat="server">
               <asp:ListItem>0</asp:ListItem>
               <asp:ListItem>1</asp:ListItem>
               <asp:ListItem>2</asp:ListItem>
               <asp:ListItem>3</asp:ListItem>
               <asp:ListItem>4</asp:ListItem>
            </asp:DropDownList>
         </td>
      </tr>

      <tr>
         <td class="style2"> </td>
         <td class="style1"> </td>
      </tr>

      <tr>
         <td class="style2">No of Text Boxes :</td>
         <td class="style1">
            <asp:DropDownList ID="ddltextbox" runat="server">
               <asp:ListItem>0</asp:ListItem>
               <asp:ListItem Value="1"></asp:ListItem>
               <asp:ListItem>2</asp:ListItem>
               <asp:ListItem>3</asp:ListItem>
               <asp:ListItem Value="4"></asp:ListItem>
            </asp:DropDownList>
         </td>
      </tr>

      <tr>
         <td class="style2"> </td>
         <td class="style1"> </td>
      </tr>

      <tr>
         <td class="style2">
            <asp:CheckBox ID="chkvisible" runat="server" 
               Text="Make the Panel Visible" />
         </td>

         <td class="style1">
            <asp:Button ID="btnrefresh" runat="server" Text="Refresh Panel" 
               style="width:129px" />
         </td>
      </tr>
   </table>
</form>

کد پشت رویداد Page_Load ، مسئول تولید کنترل ها به صورت داینامیک می باشد:

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
      //make the panel visible
      pnldynamic.Visible = chkvisible.Checked;

      //generating the lable controls:
      int n = Int32.Parse(ddllabels.SelectedItem.Value);
      for (int i = 1; i <= n; i++)
      {
         Label lbl = new Label();
         lbl.Text = "Label" + (i).ToString();
         pnldynamic.Controls.Add(lbl);
         pnldynamic.Controls.Add(new LiteralControl("<br />"));
      }
      
      //generating the text box controls:

      int m = Int32.Parse(ddltextbox.SelectedItem.Value);
      for (int i = 1; i <= m; i++)
      {
         TextBox txt = new TextBox();
         txt.Text = "Text Box" + (i).ToString();
         pnldynamic.Controls.Add(txt);
         pnldynamic.Controls.Add(new LiteralControl("<br />"));
      }
   }
}

هنگامی که برنامه اجرا می شود ، پنل به صورت زیر رندر می گردد: