แผงควบคุมสามารถทำหน้าที่เป็นคอนเทนเนอร์สำหรับการควบคุมอื่นๆ บนเพจได้ โดยจะควบคุมลักษณะที่ปรากฏและการมองเห็นของตัวควบคุมที่มีอยู่ นอกจากนี้ยังช่วยให้สามารถตั้งโปรแกรมควบคุมที่สร้างขึ้นได้
ไวยากรณ์พื้นฐานของการควบคุมแผงควบคุมมีดังนี้:
<asp:Panel ID= "Panel1" runat = "server"></asp:Panel>แผงควบคุมได้รับมาจากคลาส WebControl ดังนั้นจึงสืบทอดคุณสมบัติ วิธีการ และเหตุการณ์ทั้งหมดอย่างเท่าเทียมกัน ไม่มีวิธีการหรือเหตุการณ์ใดๆเป็นของตัวเอง อย่างไรก็ตาม มันมีคุณสมบัติของตัวเองดังต่อไปนี้:
| คุณสมบัติ | อธิบาย |
|---|---|
| กลับImageUrl | ที่อยู่ของภาพพื้นหลังแผง |
| ปุ่มเริ่มต้น | รับหรือตั้งค่าตัวระบุของปุ่มเริ่มต้นที่มีอยู่ในแผงควบคุม |
| ทิศทาง | ทิศทางของข้อความในแผง |
| การจัดกลุ่มข้อความ | อนุญาตให้ข้อความถูกจัดกลุ่มเป็นช่อง |
| แนวนอนจัด | จัดแนวเนื้อหาในแผงในแนวนอน |
| แถบเลื่อน | ระบุการมองเห็นและตำแหน่งของแถบเลื่อนภายในแผง |
| ห่อ | อนุญาตให้ตัดข้อความ |
เริ่มต้นด้วยแผงเลื่อนที่มีความสูงและความกว้างเฉพาะ และรูปแบบเส้นขอบที่เรียบง่าย คุณสมบัติแถบเลื่อนถูกตั้งค่าเป็นสองแถบเลื่อน ดังนั้นแถบเลื่อนทั้งสองจึงแสดงผลพร้อมกัน
ไฟล์ต้นฉบับมีรหัสป้ายกำกับแผงต่อไปนี้:
<asp:Panel ID="Panel1" runat="server" BorderColor="#990000" BorderStyle="Solid" Borderstyle="width:1px" Height="116px" ScrollBars="Both"> This is a scrollable panel. <br /> <br /> <asp:Button ID="btnpanel" runat="server" Text="Button" /></asp:Panel>แผงจะปรากฏขึ้นดังนี้:
ตัวอย่างต่อไปนี้สาธิตการสร้างเนื้อหาแบบไดนามิก ผู้ใช้ระบุจำนวนตัวควบคุมป้ายกำกับและกล่องข้อความที่จะสร้างบนแผงควบคุม การควบคุมถูกสร้างขึ้นโดยทางโปรแกรม
ใช้หน้าต่างคุณสมบัติเพื่อเปลี่ยนคุณสมบัติของพาเนล เมื่อคุณเลือกตัวควบคุมในมุมมองออกแบบ หน้าต่างคุณสมบัติจะแสดงคุณสมบัติของตัวควบคุมเฉพาะ และอนุญาตให้คุณเปลี่ยนแปลงได้โดยไม่ต้องพิมพ์
ไฟล์ต้นฉบับของตัวอย่างมีดังนี้:
<form id="form1" runat="server"> <div> <asp:Panel ID="pnldynamic" runat="server" BorderColor="#990000" BorderStyle="Solid" Borderstyle="width:1px" Height="150px" ScrollBars="Auto" BackColor="#CCCCFF" Font-Names="Courier" HorizontalAlign="Center"> This panel shows dynamic control generation: <br /> <br /> </asp:Panel> </div> <table> <tr> <td>No of Labels:</td> <td> <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> </td> <td> </td> </tr> <tr> <td>No of Text Boxes :</td> <td> <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> </td> <td> </td> </tr> <tr> <td> <asp:CheckBox ID="chkvisible" runat="server" Text="Make the Panel Visible" /> </td> <td> <asp:Button ID="btnrefresh" runat="server" Text="Refresh Panel" /> </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 />")); } }}เมื่อดำเนินการ แผงจะแสดงผลเป็น:
