ASP.NET-パネルコントロール

Panelコントロールは、ページ上の他のコントロールのコンテナとして機能します。含まれるコントロールの外観と可視性を制御します。また、プログラムでコントロールを生成することもできます。

パネルコントロールの基本的な構文は次のとおりです。

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

Panelコントロールは、WebControlクラスから派生しています。したがって、同じプロパティ、メソッド、イベントをすべて継承します。独自のメソッドやイベントはありません。ただし、独自の次のプロパティがあります。

Properties	Description
BackImageUrl	URL of the background image of the panel.
DefaultButton	Gets or sets the identifier for the default button that is contained in the Panel control.
Direction	Text direction in the panel.
GroupingText	Allows grouping of text as a field.
HorizontalAlign	Horizontal alignment of the content in the panel.
ScrollBars	Specifies visibility and location of scrollbars within the panel.
Wrap	Allows text wrapping.

パネルコントロールの使用

特定の高さと幅、および境界線スタイルの単純なスクロール可能なパネルから始めましょう。 ScrollBarsプロパティは両方のスクロールバーに設定されているため、両方のスクロールバーがレンダリングされます。

ソースファイルには、パネルタグ用の次のコードがあります。

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

パネルは次のようにレンダリングされます。

パネル

例

次の例は、動的コンテンツ生成を示しています。ユーザーは、パネル上に生成されるラベルコントロールとテキストボックスの数を指定します。コントロールはプログラムで生成されます。

プロパティウィンドウを使用して、パネルのプロパティを変更します。デザインビューでコントロールを選択すると、プロパティウィンドウにその特定のコントロールのプロパティが表示され、入力せずに変更を加えることができます。

パネル2

この例のソースファイルは次のとおりです。

<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/>"));
      }
   }
}

実行されると、パネルは次のようにレンダリングされます。

パネル3

Asp.net-panel-controls

ASP.NET-パネルコントロール

パネルコントロールの使用

例